组件嵌套
<div id="add">
<component-a></component-a>
</div>
<template id="temA">
<div>
<h1>这是父组件</h1>
<component-b></component-b>
</div>
</template>
<template id="temB">
<h1 style="color: aqua">这是子组件</h1>
</template>
<script>
//子组件
let componentB ={
template: '#temB'
}
//父组件
let componentA ={
template:"#temA",
components: {
componentB
}
}
new Vue({
el:'#add',
components:{
componentA
}
})
</script>
组件通讯【父给子传值】
在父组件中使用子组件时，通过v-bind进行传递数据
在子组件中使用接收到的数据
<div id="add">
<component-a></component-a>
</div>
<template id="temB">
<div>
<h1 style="color: aqua">这是子组件>>>>>>>>>{{val}}</h1>
<button @click="sonclick">子给父传值</button>
</div>
</template>
<template id="temA">
<div>
<h1>这是父组件 >>>>>>>>>{{value}}</h1>
<component-b @fudome="chagen" :val = array></component-b>
</div>
</template>
<script>
//子组件
let componentB ={
template: '#temB',
props:['val'],
methods:{
sonclick(){
this.$emit('fudome','子给父传值')
}
}
}
//父组件
let componentA ={
template:"#temA",
data:function () {
return {array: '父给子传值',
value:''}
},
components: {
componentB
},
methods: {
chagen(data){
this.value = data
}
}
}
new Vue({
el:'#add',
components:{
componentA
}
})
</script>
组件通讯【子给父传值】
子传父：子祖先向父组件传递数据
子传父：利用emit和v-on实现
emit：用于触发自定义事件
<div id="add">
<component-a></component-a>
</div>
<template id="temB">
<div>
<h1 style="color: aqua">这是子组件>>>>>>>>>{{val}}</h1>
<button @click="sonclick">子给父传值</button>
</div>
</template>
<template id="temA">
<div>
<h1>这是父组件 >>>>>>>>>{{value}}</h1>
<component-b @fudome="chagen" :val = array></component-b>
</div>
</template>
<script>
//子组件
let componentB ={
template: '#temB',
props:['val'],
methods:{
sonclick(){
this.$emit('fudome','子给父传值')
}
}
}
//父组件
let componentA ={
template:"#temA",
data:function () {
return {array: '父给子传值',
value:''}
},
components: {
componentB
},
methods: {
chagen(data){
this.value = data
}
}
}
new Vue({
el:'#add',
components:{
componentA
}
})
</script>
