vue子父组件通信及使用

vue子父组件通信及使用

在vue的页面中，有些页面由于很复杂，如果写在一个文件中需要些很多行代码，影响代码的直观性，并且绑定的数据很容易混淆。这里就可以运用子父组件进行完成，同一个子组件也可以在不同的父组件中进行运用，即子组件的共用性。

注意： 子组件不能在js中更改父组件的数据

下面对子父组件的运用进行说明：

父组件：

1. 引入子组件文件

import child from "./dialog.vue";

2. 声明子组件及数据/方法

export default {
   components:{
     child 
   },
   data(){
     return{
       fatherData:{
	     label:'你好',
	   	 value:'hello'
       },
       data2:[1,2,3],
       dialogVisible:false,
     }
   },
   methods:{
      fatherEvent(val){
      	this.dialogVisible = false
        //子组件执行时除传过来的val
        console.log(val)
      },
      entrynew(){
        this.dialogVisible = true
      }
   }
}
    

3. 在HTML中进行应用

<el-button type="primary" @click="entrynew" >打开子组件弹窗</el-button>
<!--childData为子组件接收的数据名-->
<!--@childEvent自定义事件,fatherEvent父组件函数-->
<!--ref必有，指向子组件-->
<child :childData="fatherData" 
	:data="data2" 
	:dialogVisible="dialogVisible"
    @childEvent="fatherEvent"
    ref="child" >
</child >

子组件：

1. 通信数据双向绑定（接收以及回传），执行父组件中的函数

export default {
    props:{
    //声明数据类型
      childData:Object,
      data:Array,
      dialogVisible:Boolean
    },
    data(){
      return{
      	val:'world'
      }
    },
    methods:{
      cancelDialog(){
      	//执行父组件函数fatherEvent，并且将子组件的val传参给该函数,vue固定用法
      	this.$emit('childEvent',this.val)
      }
    }
 }

2. HTML中绑定数据及事件

<el-dialog title="弹窗" :visible.sync="dialogVisible" width="1200px">
  <el-form :modle="childData">
    <el-form-item :label="childData.label">
      <el-input v-model="childData.value"></el-input>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="cancelDialog" >关闭弹窗并打印val</el-button>
</el-dialog>