Vue-父子组件传值

　　在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。
一、父组件向子组件传值
　　使用 Prop 传递数据，父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式地用 props 选项声明它预期的数据。

Vue.component('child', {

  // 声明 props

  props: ['myMessage'],

  // 就像 data 一样，prop 也可以在模板中使用

  // 同样也可以在 vm 实例中通过 this.myMessage 来使用

  template: '<span>{{ myMessage }}</span>'

})

　　然后我们可以这样向它传入一个普通字符串：

<child my-message="hello!"></child>

　　也可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件

<div>

  <input v-model="parentMsg">

  <br>

  <child :my-message="parentMsg"></child>

</div>

　　总结一下：

1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性
⚠️子组件不能修改父组件传过来的值

二、子组件向父组件传值
　　总结一下：

1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听　　　　　　　　　　　　　　　　　　　　　　　　　　

　　参考文章：https://www.cnblogs.com/daiwenru/p/6694530.html

巴特西

Vue-父子组件传值

最新文章

热门文章