一. 组件通信
1.父传子 通过props
<body>
<div id="add">
<div>
<cpn :cmovies = 'movies' :cmessage = 'message'></cpn>
</div>
</div>
<template id="cpn">
<div>
<ul>
<li v-for = 'item in cmovies'>{{item}}</li>
</ul>
<h2>{{cmovies}}</h2>
<p>{{cmessage}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: '#cpn',
// props: ["cmovies",'cmessage'],
props: {
// 1.类型限制
// cmovies: Array,
// cmessage: String,
// 2.提供一些默认值,以及必传值
cmessage: {
type: String,
default: 'aaaaa', //默认值
required: true //必传值
},
//3.类型是对象或者数组时,默认值必须是一个函数
cmovies: {
type: Array,
default(){
return ['aaa']
}
},
},
data() {
return {
};
},
}
const add = new Vue({
el: '#add',
data: {
movies: ['小熊','小强','小兰','小花'],
message: '你好世界'
},
components: {
cpn
}
})
</script>
</body>
2.子传父 $emit()发射,在标签名绑定
<body>
<div id="add">
<div>
<cpn @item-click = "cpnClick"></cpn>
</div>
</div>
<template id = 'cpn'>
<div>
<button v-for = "item in categories" @click = "btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: '#cpn',
data() {
return {
categories: [
{id: 'a',name: '热门推荐'},
{id: 'b',name: '手机数码'},
{id: 'c',name: '家用家电'},
{id: 'd',name: '电脑办公'},
]
};
},
methods: {
btnClick(item) {
// 发射
this.$emit('item-click', item);
},
},
}
const add = new Vue({
el: '#add',
data: {
},
methods: {
cpnClick(item){
console.log('hh',item);
}
},
components: {
cpn
}
})
</script>
</body>
二.组件访问
一.父访问子
1.$children
<body>
<div id="add">
<cpn></cpn>
<cpn ref = "aaa"></cpn>
<cpn></cpn>
<button @click = "btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const add = new Vue({
el: '#add',
data: {
message: '你好',
},
methods: {
btnClick(){
console.log( this.$children);
this.$children[0].showMessage()
// console.log(this.$refs.aaa.name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'value',
};
},
methods: {
showMessage(){
console.log('hello word');
}
}
},
}
})
</script>
</body>
通过$children访问子组件
2.$refs
<body>
<div id="add">
<cpn></cpn>
<cpn ref = "aaa"></cpn>
<cpn></cpn>
<button @click = "btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const add = new Vue({
el: '#add',
data: {
message: '你好',
},
methods: {
btnClick(){
// console.log( this.$children);
// this.$children[0].showMessage()
console.log(this.$refs.aaa.name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'value',
};
},
methods: {
showMessage(){
console.log('hello word');
}
}
},
}
})
</script>
</body>
通过 ref = “” 标记,访问该子组件
二. 子访问父
1.$parent
<body>
<div id="add">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<button @click = "btnClick">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const add = new Vue({
el: '#add',
data: {
message: '你好',
},
methods: {
},
components: {
cpn: {
template: '#cpn',
data() {
return {
};
},
methods: {
btnClick(){
console.log(this.$parent.message);
}
}
},
}
})
</script>
</body>
2.访问root组件
<body>
<div id="add">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<button @click = "btnClick">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const add = new Vue({
el: '#add',
data: {
message: '你好',
},
methods: {
},
components: {
cpn: {
template: '#cpn',
data() {
return {
};
},
methods: {
btnClick(){
console.log(this.$root.message);
}
}
},
}
})
</script>
</body>