Vue组件通信
2017-12-12 本文已影响17人
西兰花伟大炮
（1）父组件通过ref获取子组件data
- 给子组件模板一个ref名
- 父组件通过this.$ref.ref名.data来取子组件的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ref父组件访问子组件数据</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getChildInfo">通过ref获取子组件实例</button>
<h3>{{message}}</h3>
<component-a ref="child"></component-a>
</div>
<script>
Vue.component('component-a',{
template:"<div>{{message}}</div>",
data:function(){
return {
message:"子组件的信息"
}
}
});
var app = new Vue({
el:"#app",
data:function(){
return {
message:""
}
},
methods:{
getChildInfo:function(){
this.message = this.$refs.child.message;
}
}
});
</script>
</body>
</html>
image.png
可用来调用子组件的方法
（2）为父组件做替补的slot插槽
- 父组件模板里，插入在子组件标签内的所有内容将替代子组件slot标签及它的内容
- 当slot的个数大于父模板插入的内容数目，依然全部渲染为父模板内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slot插槽</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
</head>
<body>
<div id="app">
<in-case>
<p>我是先发全明星控卫保罗!</p>
</in-case>
</div>
<script>
Vue.component('in-case',{
template:`<div>
<slot><p>我是替补控卫贝弗利地狱恶狗</p></slot>
</div>`
})
var app = new Vue({
el:"#app"
})
</script>
</body>
</html>
image.png
（3）父向子传值props
可以使用数组或对象，标准情况使用对象
image.png
（4）子向父传值this.$emit()
子组件方法中调用
this.$emit('触发绑定在子组件上的方法'，传递给父组件的数据)
（5）provide / inject
一个组件使用了 provide 向下提供数据，那其下所有的子组件都可以通过 inject 来注入，不管中间隔了多少代，而且可以注入多个来自不同父级提供的数据。需要注意的是，一旦注入了某个数据，比如上面示例中的 app，那这个组件中就不能再声明 app 这个数据了，因为它已经被父级占有。
