一.父组件向子组件传递数据
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。
1.静态props
父组件:子组件{ {msg}}//输出 hello
2.动态props(要动态地绑定父组件的数据到子模板的props用 v-bind。每当父组件的数据变化时,该变化也会传导给子组件)
父组件:
3.单项数据流
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你++不应该在子组件内部改变 prop++ .
使用v-on绑定自定义事件,每个Vue实例都实现了事件接口,即:
使用监听事件
使用触发事件
子组件部分:
###### transferUser 是一个自定义的事件,功能类似于一个中转,this.msg 将通过这个事件传递给父组件
父组件部分://在父组件 App.vue 中,声明了一个方法 getMsg,用 transferUser 事件调用 getMsg 方法,获取到从子组件传递过来的参数 msg