一、父组件向子组件传递
父组件向子组件传递数据，可以通过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 方式一: 数组
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:{
//1.这种写法 可以进行 数据类型限制
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){
//事件触发后，发送事件以及要传递的数据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(){
// 1. 通过$children
console.log(this.$children);
this.$children[0].showMessage();
console.log(this.$children[0].name);
// 2. 使用 $refs 默认是一个空对象 需要在组件上加上属性 res
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(){
// 通过 $parent 访问父组件
console.log(this.$parent);
console.log(this.$parent.name);
// 也可以直接访问 根组件$root
console.log(this.$root.message);
}
},
}
},
data(){
return {
name: '我是cpn的name'
}
}
},
},
})
</script>