<html>
<body>
<div id='app'></div>
</body>
<script>
Vue.component('C',{
props:['texta'],
template:'\
<h6>\
<p>这是C组件</p>\
<div>\
<C v-bind="$attrs" v-on="$listeners" ></C>\
</div>\
</h6>',
data:function(){
return {
}
},
methods:{
getCData(val){
console.log('这是来自C组件的数据')
}
}
})
Vue.component('B',{
props:['texta'],
components:{
C
}
template:'\
<h6>\
<p>这是B组件</p>\
<div>\
<C v-bind="$attrs" v-on="$listeners" ></C>\
</div>\
</h6>',
data:function(){
return {
}
},
methods:{
getCData(val){
console.log('这是来自C组件的数据')
}
}
})
Vue.component('father1',{
props:['texta'],
components:{
B
}
template:'\
<h6>父组件\
<div>\
<B :messagec="messagec" :msgc="msgc2" v-on:getCData="getCData"></B>\
</div>\
</h6>',
data:function(){
return {
}
},
methods:{
getCData(val){
console.log('这是来自C组件的数据')
}
}
})
const app = new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</html>