vue父组件与子组件的数据传递

1.父组件引进子组件步骤

（1）先在父组件中声明子组件

components:{
    headerVue,
},

（2）在父组件中引入子组件

import headerVue from "../components/Header.vue"

（3）在父组件中使用子组件

<template>
    <div class="newCom">
        <headerVue ref="header"></headerVue>
    </div>
</template>

2.父组件给子组件传递数据的方法

（1）通过props

父组件中给子组件标签绑定传递数据

data () {
    return {
        parentData:'父组件的值'
    };
},
<headerVue ref="header" :msg="parentData"></headerVue>

子组件通过props来接收

props:["msg"],
<div>来自父组件传递的值msg：{{msg}}</div>

（2）父组件通过调用子组件方法给子组件传值

子组件定义要被父组件调用的方法

<div>父组件通过调用子组件方法更改子组件的值age:{{age}}</div>
data () {
    return {
        age:''
    };
},
methods:{
    // 父组件触发子组件的init方法
    init(age){
        this.age = age
    }
}

父组件给子组件标签添加ref属性

<headerVue ref="header" :msg="parentData"></headerVue>

父组件通过调用子组件方法传递数据

<el-button @click="changeData">点击触发子组件方法</el-button>
methods:{
    changeData(){
        // 触发子组件方法，并传参
        this.$refs.header.init("18");
    }
}

3.子组件给父组件传递数据

通过$emit来实现

在父组件中给子组件标签指定数据绑定的函数@func

<headerVue @func="getMsgFormSon" ref="header" :msg="parentData"></headerVue>
data () {
    return {
        parentData:'父组件的值',
        msgFormSon:''
    };
},
methods:{
    changeData(){
        // 触发子组件方法，并传参
        this.$refs.header.init("18");
    },
    getMsgFormSon(data){
        this.msgFormSon = data;
    }
}

子组件通过触发$emit提交数据

<el-button @click="sendMsg">给父组件传递数据</el-button>
data () {
    return {
        age:'',
        msg2:'我是子组件的msg'
    };
},
  methods:{
    // 父组件触发子组件的init方法
    init(age){
        this.age = age
    },
    sendMsg(){
        // func: 父组件指定的数据绑定的函数，this.msg2: 子组件给父组件传递的数据
        this.$emit('func',this.msg2);
    }
  }

1.父组件引进子组件步骤

2.父组件给子组件传递数据的方法

3.子组件给父组件传递数据

更多相关文章

随机推荐