一、父组件向子组件传递
父组件向子组件传递数据，可以通过props属性来实现：
1.1 第一种写法：使用数组类型
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Ocean',
movies:['海贼王','fate','vivy']
},
components:{
cpn:{
template:'#cpn',
props:['cmovies','cmessage']
}
}
})
</script>
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<p>{{cmessage}}</p>
</div>
</template>
1.2 第二种写法：使用对象类型（这种方法可以对数据进行类型的限制）
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Ocean',
movies:['海贼王','fate','vivy']
},
components:{
cpn:{
template:'#cpn',
props:{
cmovies:Array,
cmessage:String
}
}
}
})
</script>
1.3 第三种写法 可以添加默认值
当没有传入对应的值的时候会使用默认值
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Ocean',
movies:['海贼王','fate','vivy']
},
components:{
cpn:{
template:'#cpn',
props:{
cmovies:{
type:Array,
default:'aaaaa',
required:true
},
cmessage:{
type:String,
default:[]
}
}
}
}
})
</script>
二、子组件向父组件传递
我们可以通过自定义事件，来达到子组件向父组件通信的目的
代码如下：
<div id="app">
<cpn @itemclick="cpnClick"></cpn>
</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 app = new Vue({
el: '#app',
data: {
message: 'Ocean'
},
components:{
cpn:{
template:'#cpn',
data(){
return {
categories:[
{
id:'aaa',
name:'热门推荐'
},
{
id:'bbb',
name:'手机数码'
},
{
id:'ccc',
name:'生活用品'
},
{
id:'ddd',
name:'食品零食'
}
]
}
},
methods:{
btnClick(item){
this.$emit('itemclick',item)
}
},
}
},
methods:{
cpnClick(item){
console.log(item);
}
}
})
</script>
三、父组件访问子组件
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn ref="aaa"></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<p>我是子组件</p>
</div>
</template>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Ocean'
},
components:{
cpn:{
template:'#cpn',
methods:{
showMessage(){
console.log('showMessage');
}
},
data(){
return {
name: '我是子组件的name'
}
}
}
},
methods:{
btnClick(){
console.log(this.$children);
this.$children[0].showMessage();
console.log(this.$children[0].name);
console.log(this.$refs.aaa.name);
}
}
})
</script>
注意：使用 $refs 默认是一个空对象 需要在组件上加上属性 res，来告诉vue需要访问的哪一个子组件
四、子组件访问父组件
可以通过 $parent 来访问父组件中的数据；也可以通过 $root来直接访问根组件
<div id="app">
<h2>我是cpn组件</h2>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>我是cpn的子组件</h2>
<button @click="btnClick">按钮</button>
</div>
</template>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Ocean'
},
components:{
cpn:{
template:'#cpn',
components:{
ccpn:{
template:'#ccpn',
methods:{
btnClick(){
console.log(this.$parent);
console.log(this.$parent.name);
console.log(this.$root.message);
}
},
}
},
data(){
return {
name: '我是cpn的name'
}
}
},
},
})
</script>
|