1.父组件引入并注册子组件
import BusinessDialog from '../../components/BusinessDialog'
export default {
components: {
BusinessDialog
},
data() {
return {
dialog:false;
};
},
2.在父组件中使用子组件
<business-dialog :dialog.sync="dialog"></business-dialog>
//这里的dialog就是要传递给子组件的值,默认是false(不弹出)
3.事件触发改变dialog的值
openDialog() {
this.dialog = true
},
//在父组件中点击编辑按钮,触发弹窗
以下是子组件的操作
export default {
//子组件通过props接收父组件传递过来的值 dialog控制弹窗的弹出及隐藏
props: {
dialog: {
type: Boolean,
default: false,
},
},
data() {
return {
};
},
methods: {
checkDate(val) {},
//解决弹窗只能弹一次的问题(点击确定和取消按钮的时候,给dialog做一个重新赋值)
confirm() {
this.$emit("update:dialog", false);
},
cancle() {
this.$emit("update:dialog", false);
},
//子组件传值给父组件(onChange是传递给父组件的事件名, true是传递给父组件的值)
this.$emit('onChange',true)
},
};
父组件怎么接收子组件传的值呢?
<business-dialog :dialog.sync="dialog" @onChange="getData"></business-dialog>
methods:{
getData(val) {
//这个val就是接收到的子组件传递过来的值啦~~~~
}
}