1、props/$emit
最常用的一种父子间传递数据的方式。
描述：
父组件通过绑定属性来向子组件传递数据，子组件通过 props 属性来获取对应的数据；子组件通过 $emit 事件向父组件发送消息，将自己的数据传递给父组件。
使用方法：
// 父组件compA <template> <div> <compB :title="value" :moreBtn="moreBtn" @more="onMore"/> </div> </template> <script> import compB from './compB' export default{ name: 'compA', components:{ compB }, data(){ return { value: '', moreBtn: true } }, method:{ onMore(value){ console.log('value', value) //点击查看更多按钮 } } } </script>
//子组件compB <template> <div> <div class="title">{{value}}</div> <div v-if="moreBtn" @click="handleMore">查看更多</div> </div> </template> <script> export default{ name: 'compB', data(){ return { } }, props: { title: { type: String, default: '标题' }, moreBtn: { type: Boolean, default: false } } method:{ handleMore(){ this.$emit('more', '点击查看更多按钮') } } } </script>
props使得父子之间形成一种单向数据流，父元素更新的时候，子元素的状态也会随之改变。但反之会导致你的应用的数据流向难以理解。
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
如果通过prop传递的数据是数组或者是对象，则是可以改变父对象的值，但是不推荐。如果传递的是个字符串，还要改变父组件的值，那么Vue 会在浏览器的控制台中发出警告。
在某些情况下，需要子组件改变父组件的值，推荐使用(2.3.0+)版本新增的.sync语法糖。
使用方法：
// A.vue <template> <add-modal v-if="modalVisiable" :visiable.sync='modalVisiable' @submit="saveForm" /> </template> <script> export default { name: 'A', data(){ return { modalVisiable: false } } } </script>
// B.vue <template> <Modal v-model="show" width="600" title="弹框" :loading='true' @on-cancel="$emit('update:visiable', false)" > </Modal> </template> <script> export default { name: 'A', data(){ return { show: false, } }, created(){ this.show = this.visiable }, props: { visiable: { type: Boolean, default: false } }, } </script>
通过 this.$emit('update:visiable', false) 来改变父元素的状态
