父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。
子组件向父组件传值
子组件使用 this $emit（'自定义事件名',要传送的数据）向父组件传递数据。
1.template 模块里面直接使用this $emit（'自定义事件名',要传送的数据）
2.事件里面使用this $emit，使代码结构更清晰
//这是子组件 editData.vue
<button @click="saveEdit =>$emit('saveEdit', this.saveData)">保存</button>
//或者
<button @click="editCancel">取 消</button>
methods: {
editCancel() {
// this.$emit('editCancel',this.editVisible); // 带参数
this.$emit('editCancel'); // 不带参数
}
}
父组件中引入子组件, v-on(简写@)监听自定义事件
//这是父组件 index.vue
// 引入子组件
import EditData from "./editData.vue";
components: {
EditData
},
// 使用子组件
<EditData
@saveEdit="saveEdit"
@editCancel="事件名可自定义,为了方便就不改了"
/>
//JS
methods: {
editCancel(data) {
console.log(data)//data 传过来的参数
}
}
父组件向子组件传值
父组件使用子组件时, 使用v-bind绑定数据,
//父组件
<EditData
:editVisible="editVisible"
:formlist="list"
/>
//data数据
data() {
return {
list: {},
editVisible: false,
};
},
子组件通过props接收传递的值
// props简单接收
props: ["editVisible", "list"]
//props 验证
//验证传入的 props 参数的数据规格，如果不符合数据规格，Vue 会发出警告。
props: {
editVisible:Boolean,
list:{
type: Object, // 类型
required: true // 必传,不能为空
}
},
// 传过来的值也可以使用computed计算属性
