父組件
<div><child @upup="change" :child-msg="data">
<div slot="slot1">父組件插入</div>
<child></div>
<div>{{childData}}</div>
export default {
components: {
child
},
data () {
return {
data: "from parent",
childData:""
}
},
methods:{
change(msg){
this.childData=msg;
this.data="parent change"
}
}
}
子組件
<li>{{msg}}</li>
<li><slot name="slot1">子組件<slot></li>
<li>{{childMsg}}<li>
<li><div@click="toParent">click To parent</div><li>
export default {
name:"child",
components: {
},
data () {
return {
msg: 'this is child',
data:"from child"
}
},
props:{
childMsg: {
type: String,
default: "null" //這樣可以指定默認的值
}
},
methods:{
toParent(){
this.$emit('upup',this.data); //主動觸發(fā)upup方法，'hehe'為向父組件傳遞的數(shù)據(jù)
}
}
}
子組件通過props來接收數(shù)據(jù):
name:"child",
components: {
},
data () {
return {
msg: 'this is child',
data:"from child"
}
},
props:{
childMsg: {
type: String,
default: "null" //這樣可以指定默認的值
}
},
methods:{
toParent(){
this.$emit('upup',this.data); //主動觸發(fā)upup方法，'hehe'為向父組件傳遞的數(shù)據(jù)
}
}
}
父組件向子組件傳值，子組件用props接受，data改變后，子組件內(nèi)childMsg也改變
子組件向父組件傳值，用事件，父組件接受事件要加在子組件上
順便用了slot當(dāng)子組件模板只有slot 時，父組件內(nèi)容片段將插入到 slot 所在的 DOM 位置，并替換掉 slot 標(biāo)簽本身。
