1、常规用法

(1)父组件传值给子组件,通过props接收父组件的传的值。子组件传值给父组件,通过$emit()事件分发向父组件传值。

父组件中 定义:isDomDialog传值 :

<DomDialog :isDomDialog="isDomDialog" @getValue="getVal"></DomDialog>

子组件中接收:

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)在父组件中:

<DomDialog v-model="isDomDialog"></DomDialog>    

等同于如下常规写法:

<DomDialog v-bind:value="isDomDialog" v-on:input="isDomDialog=$event"></DomDialog> 

或者

<DomDialog :value="isDomDialog" @input="isDomDialog=$event"></DomDialog>

(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和parent

(1)在父组件中html代码:

<el-button @click="clickedBut">点击</el-button>
<DomDialog ref="child"></DomDialog>  

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("成功调用子组件方法!")
    }
  },
Logo

前往低代码交流专区

更多推荐