vue父子组件v |
您所在的位置：网站首页 › vue子组件props接收父组件传值 › vue父子组件v |
vue父子组件v
|
记录三种常用的父子组件传值 1、常规用法 （1）父组件传值给子组件，通过props接收父组件的传的值。子组件传值给父组件，通过$emit()事件分发向父组件传值。 父组件中 定义:isDomDialog传值 ： 子组件中接收： props:{ isDomDialog:{type: Boolean,} }, data(){ return { dialogVisible:false, } }, watch:{ isDomDialog(val){ this.dialogVisible = val } },子组件传值$emit()： methods: { // 关闭弹窗触发 confrim(){ this.$emit('getValue',false) } },父组件@getValue="getVal"接收： methods: { getVal(val){ this.isDomDialog = val } },2、父子组件的v-model传值 （1）先看官方文档 （2）在父组件中： 等同于如下常规写法： 或者 （3）在子组件中的接收与传值： props:{ value:{type: Boolean,}, }, data(){ return { dialogVisible:false, } }, watch:{ value(val){ this.dialogVisible = val }, }, methods: { // 关闭弹窗触发 confrim(){ this.$emit('input',false) // 通过 this.$emit() 向父组件传值 } },3、父子组件通信refs和refs和refs和parent （1）在父组件中html代码： 点击js代码通过$refs调用子组件： data(){ return{ parentData:'111', } }, components:{DomDialog}, methods: { clickedBut(){ this.$refs.child.dialogVisible = true // 给子组件声明的变量dialogVisible赋值 this.$refs.child.handle() // 调用子组件的 handle() 方法 }, parentHandle() { alert("成功调用父组件方法") } },（2）在子组件中js代码，通过$parent调用父组件： data(){ return { dialogVisible:false, } }, methods: { // 关闭弹窗触发 confrim(){ this.dialogVisible = false this.$parent.parentData = "123456" // 改变父组件声明的变量parentData this.$parent.parentHandle() // 调用父组件的 parentHandle() 方法 }, handle() { alert("成功调用子组件方法！") } }, |
【本文地址】