2019-10-14Vue的父子组件通信
2019-10-14 本文已影响0人
卡布奇诺_7828
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-header :list="lista"></my-header>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data() {
return {
lista:['第一项','第二项','第三项']
}
},
components:{
'my-header':{
template:`<div>
<h2>{{message}}</h2>
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
<my-nav @changeEvents="getChildContent" :listb='list'></my-nav>
</div>`,
data : function(){
return{
message :'hello myHeader!!!',
};
},
// props:['list'],//父组件向子组件进行通信操作的
props:{
'list':{
type:Array,
default:function(){
return ['第一项111','第二项222','第三项333']; //没有挂载时的默认值
}
},
},
methods: {
getChildContent:function(str){
console.log(str);
this.message=str;//数据操作，建议大家用数据操作
// this.$refs.myTitle.innerHTML=str//DOM操作
}
},
components:{
'my-nav':{
template:`
<ul>
<li @click="getContent" v-for='item in listb'>{{item}}</li>
</ul>`,
props:['listb'],
methods: {
getContent : function(ev){
this.$emit('changeEvents',ev.target.innerHTML);
// console.log(this);
// console.log(ev.target.innerHTML);
}
},
}
}
}
}
})
</script>
</body>
</html>
