(1)先在父组件中声明子组件
components:{
headerVue,
},
(2)在父组件中引入子组件
import headerVue from "../components/Header.vue"
(3)在父组件中使用子组件
<template>
<div class="newCom">
<headerVue ref="header"></headerVue>
</div>
</template>
(1)通过props
data () {
return {
parentData:'父组件的值'
};
},
<headerVue ref="header" :msg="parentData"></headerVue>
props:["msg"],
<div>来自父组件传递的值msg:{{msg}}</div>
(2)父组件通过调用子组件方法给子组件传值
<div>父组件通过调用子组件方法更改子组件的值age:{{age}}</div>
data () {
return {
age:''
};
},
methods:{
// 父组件触发子组件的init方法
init(age){
this.age = age
}
}
<headerVue ref="header" :msg="parentData"></headerVue>
<el-button @click="changeData">点击触发子组件方法</el-button>
methods:{
changeData(){
// 触发子组件方法,并传参
this.$refs.header.init("18");
}
}
通过$emit来实现
<headerVue @func="getMsgFormSon" ref="header" :msg="parentData"></headerVue>
data () {
return {
parentData:'父组件的值',
msgFormSon:''
};
},
methods:{
changeData(){
// 触发子组件方法,并传参
this.$refs.header.init("18");
},
getMsgFormSon(data){
this.msgFormSon = data;
}
}
<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);
}
}