vue父子组件v-model传值

Posted 2022-03-30 李斌的BLOG

记录三种常用的父子组件传值

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和refs和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("成功调用子组件方法！")
    
  ,