Vue组件（二） 通信
1、父组件向子组件传递数据
1、父组件通过props向子组件传递数据
在vue中，子组件是不能引用父组件或者是Vue实例的数据的
但是在开发中，往往有一些数据需要从上层传递到下层：
那么如何进行父子组件间的通信呢？
通过props向子组件传递数据
通过事件向父组件
2、demo演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<p>{{cmovies}}</p>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: "#cpn",
/*props: ['cmovies', 'cmessage'],*/
props: {
//1、类型限制
/*cmovies: Array, //可以对数据做一些验证，表示cmovies必须是数组类型
cmessage: String*/
//2、提供一些默认值
cmessage: {
type: String,
default: '后臣',
required: true //父组件在使用这个组件时，必须要传值
},
cmovies: {
type: Array,
default: [] //
}
},
data: function () {
return {}
}
}
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
message: 'hello',
movies: ['海王','火影忍者','柯南']
},
components: {
'cpn': cpn
}
})
</script>
</body>
</html>3、props驼峰标识
// 父组件使用子组件 <cpn :c-info="info"></cpn> //子组件接收的数据 props: { cInfo: { type: Object, default(){ return {} } } }
2、子组件向父组件传递数据
1、子组件通过自定义事件向父组件传递数据
<!--父组件模板-->
<div id="app">
<!--父组件监听子组件发射出来的事件 itemClick-->
<!--cpnClick: 对子组件发射出来的事件进行处理 -->
<!--<cpn v-on:itemClick="cpnClick"></cpn>-->
<cpn @itemclick="cpnClick"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<script>
//1、子组件
const cpn = {
template: '#cpn',
data(){
return{
categories: [
{id: 1,name: '热门推荐'},
{id: 1,name: '手机数码'},
{id: 1,name: '家具家电'},
{id: 1,name: '电脑办公'}
]
}
},
methods: {
btnClick(item){
//子组件发射这个事件
this.$emit('itemclick',item);
}
}
}
//2、相当于父组件
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
message: 'hello',
},
methods: {
cpnClick(item){
console.log("cpnClick",item)
}
},
components: {
cpn
}
})
</script>3、父子组件的访问方式
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者子组件直接访问根组件
父组件访问子组件：$children 或者 $refs
//1、$children : 在父组件中通过$children来获取子组件 /*console.log(this.$children); this.$children[0].showMessage();*/ //2、$refs //this.$refs默认是空的对象,必须在使用的组件上加 ref="aaa" console.log(this.$refs.aaa);
子组件访问父组件：$parent
//1、访问父组件 console.log(this.$parent); //2、访问Vue实例 console.log(this.$root.message);
