重要：Vue 组件间通信的方式：
Vue 组件间通信主要有 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信。
props/$emit父子组件通信
ref 与 $parent/$children父子组件通信
$attrs/$listeners隔代组件通信
provide/inject隔代组件通信
$emit/$on父子、隔代、兄弟组件通信
Vuex 父子、隔代、兄弟组件通信
链接：https://github.com/yangtao2o/learn/issues/97
一、自定义组件
- 单页面标签（局部组件），只在当前引入页面有效。
子组件为：HaHa.js
<template>
<div>
<h2>我是子组件哈哈组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
单页面标签 App.vue 引入
<template>
<div>
<!--自封闭和双标签均可 -->
<xixi/>
<xixi></xixi>
</div>
</template>
<script>
//标签引入
import HaHa from "./components/HaHa";
export default {
// 标签注册
components :{
xixi : HaHa
// 千万不要加引号，一般这里 k:v 一直省略 V
}
}
</script>
<style>
</style>
页面效果
- （全局组件）首页引入的组件子组件的任何地方都可以使用
效果就是可以达到天下无人不识君。
import Vue from "vue";
import App from "./App";
// 引入
import HaHa from "./components/HaHa";
// 注册
Vue.component("HaHa",HaHa);
new Vue({
el : "#app",
render(h){
return h(App)
}
});
二、儿子读取父标签属性
父组件：
<template>
<div>
<!--自封闭和双标签均可 -->
<HaHa info = "我是父标签的自定义属性"></HaHa>
</div>
</template>
<script>
//标签引入
import HaHa from "./components/HaHa";
export default {
// 标签注册
components :{
HaHa
}
}
</script>
<style>
</style>
子组件：
<template>
<div>
<h2>我是子组件哈哈组件</h2>
<p>{{info}}</p>
</div>
</template>
<script>
export default {
props : ["info"]
}
</script>
<style>
</style>
现在看到的是以字符串数组形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
通常可以给每个 prop 指定固定的类型，以确保得到正确的值，props 的对象法:
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
三、父子标签之间双向通信
依据儿子可以更改父亲传过来的值进行分类的：
- 对象法
父子之间传递的参数如果不是引用类型，儿子只读，无权改变，但是传入引用类型的标签儿子可以依法改变。这与 react 不同，react 任何情况下不能改变父标签传来的参数。
HaHa.vue 子组件
<template>
<div>
<h2>我是子组件哈哈组件</h2>
<p>{{info.value}}</p>
<p><button @click = "add">子组件改变数值</button></p>
</div>
</template>
<script>
export default {
props : ["info"],
methods : {
add(){
this.info.value--
}
}
}
</script>
<style>
</style>
<template>
<div>
<!--自封闭和双标签均可 -->
<HaHa :info = "n"></HaHa>
<button @click = "add">父组件改变info的数值</button>
</div>
</template>
<script>
//标签引入
import HaHa from "./components/HaHa";
export default {
data(){
return {
n : {value:10}
}
},
// 标签注册
components :{
HaHa
},
methods : {
add(){
this.n.value++
}
}
}
</script>
<style>
</style>
父子之间的双向通信.gif
Prop 验证 可以为组件传进来的值添加类型判断，当不符合类型的时候给出警告。对自己可能没多大用，但在开发一个会被别人用到的组件时尤其有帮助。
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
// 单个类型
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function() {
return {
message: 'hello'
}
}
},
// 自定义验证函数
propF: {
validator: function(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
需要注意的是：** prop 会在一个组件实例创建之前进行验证，Vue 中的 data 触发在 beforeCreate 和 Created之间**
- 函数法
HaHa.vue 子组件
<template>
<div>
<textarea cols = "50" rows = "10" ref = "send" @input = "add" :value="content" placeholder="请输入..."></textarea>
<button @click = "clear">点我清空</button>
</div>
</template>
<script>
export default {
data(){
return {
content : ""
}
},
props:["info"],
methods :{
add(){
thisdd.info(this.$refs.send.value)
this.content = this.$refs.send.value;
},
clear(){
this.content = "";
this.info(null)
}
}
}
</script>
<style>
</style>
父组件App.vue
<template>
<div>
<HaHa :info = "add"></HaHa>
<p>{{info}}</p>
</div>
</template>
<script>
import HaHa from "./components/HaHa";
export default {
components : {
HaHa
},
data(){
return {
info : null
}
},
props:[],
methods:{
add(str){
this.info = str;
}
}
}
</script>
<style>
p {
width: 400px;
height: 200px;
background-color: #fcf;
}
</style>
实时输入.gif
- 内置函数法
内置函数方法一共有两种。
-
$parent.$emit 发，mounted 生命周期里用 $on 收
父组件 App.vue
<template>
<div>
<Haha></Haha>
<h1>{{a}}</h1>
</div>
</template>
<script>
import Haha from "./Haha.vue";
export default {
data(){
return {
a : ""
}
},
components:{
Haha
},
mounted(){
// 通过这 $on来监听接收
this.$on("info",function(res){
this.a = res;
});
}
}
</script>
<style lang="scss" scoped>
</style>
子组件 Haha.vue
<template>
<div>
<h1>我是Son</h1>
<Button @click = "add">点我发送</Button>
</div>
</template>
<script>
export default {
methods:{
add(){
this.$parent.$emit("info",'我是儿子组件发来的信息');
}
}
}
</script>
<style lang="scss" scoped>
</style>
$parent.$emit 发，mounted 生命周期里用 $on 收
- 行内监听
子组件 HaHa.vue 在 methods 里面通过事件发送信息
this.$emit("info",'我是儿子组件发来的信息');
也可以直接：
<Button @click = "$emit("info",'我是儿子组件发来的信息')">点我发送</Button>
上面两种方法子组件发送的效果是一样的。
父组件 App.vue 通过 @info 直接接收
<template>
<div>
<Haha @info = "dataHaha"></Haha>
<h1>{{a}}</h1>
</div>
</template>
<script>
import Haha from "./Haha.vue";
export default {
data(){
return {
a : ""
}
},
components:{
Haha
},
methods:{
dataHaha(res){
this.a = res;
}
}
}
</script>
<style lang="scss" scoped>
</style>
触发函数的第一个形参就是子组件发送的内容。
另外注意的是监听的时候 dataHaha 函数不能加圆括号，如果加的话必须这样写：
<Haha @info = "dataHaha($event)"></Haha>
如果这样写的话，还可以在加点东西：
<template>
<div>
<Haha @info = "dataHaha($event,'负载的额外参数')"></Haha>
<h1>{{a}}</h1>
</div>
</template>
<script>
import Haha from "./Haha.vue";
export default {
data(){
return {
a : ""
}
},
components:{
Haha
},
methods:{
dataHaha(res,palyload){
this.a = res + palyload;
}
}
}
</script>
<style lang="scss" scoped>
</style>
负载的额外参数
四、兄弟标签之间的通信
兄弟标签之间的通信借用第三方，对这个第三方的要求很简单，保证借用它的标签的数据能实时更新，满足这个的只有 Vue 实例，完成这个过程的就是江湖人称的 bus。
- 中介者法
现在我们需要 HaHa 和 XiXi 之间进行通信，这时的有一个第三方来完成，我们新建一个bus.js看清是 JS 文件，输入：
import Vue from "vue";
export default new Vue({
data : {
a : 100
},
methods : {
add(){
this.a++;
}
}
})
bus.js 文件定义了一个方法，并设置了一个参数。
接下来以 HaHa.vue 文件为例子：
<template>
<div>
<h3>我是哈哈{{a}}</h3>
<button @click = "add">按我加加</button>
</div>
</template>
<script>
import bus from "./bus.js";
export default {
// 代理函数不能写在methods里面虽然不报错，但是也不更新
methods : {
add(){
bus.add();
}
},
//computed用来接收
computed:{
a(){
return bus.a
}
}
}
</script>
<style>
</style>
里面的 computed 是用来接收的，指定接受的 a 函数，就是用来插入的，也可以用 methods 来接收但是插进入的方法就变了，必须的这样写 {{a()}} 。切记不能用 data 来接收。
在 XIXi 里面同样引入。得出如下结果：
bus.gif
- 原型法通信
打开 main.js ，让暴露出来的 bus 绑定在 Vue 的身上。
import Vue from "vue";
import App from "./App";
import bus from "./components/bus.js"
Vue.prototype.$bus = bus;
new Vue({
el : "#app",
render(h){
return h(App)
}
});
这时就可以在任意子文件下访问了。其实就是给 Vue 绑定了一个原型对象。
<template>
<div>
<h3>我是哈哈{{$bus.a}}</h3>
<button @click = "add">按我加加</button>
</div>
</template>
<script>
export default {
methods : {
add(){
this.$bus.a++
}
}
}
</script>
<style>
</style>
- 插件法
插件法基本思想还是原型法，只不过是使用插件进行引用的。子文件夹里面进行使用和原型法的使用是一模一样的。
我们打开 main.js 修改：
import Vue from "vue";
import App from "./App";
import bus from "./components/bus.js"
// use 使用插件
Vue.use(bus);
new Vue({
el : "#app",
render(h){
return h(App)
}
});
这时的进入 bus.js 修改使用方法了。
import Vue from "vue";
export default {
install(Vue){
Vue.prototype.$bus = new Vue({
data : {
a : 100
},
methods : {
add(){
this.a++;
}
}
})
}
}
Vue.use() 里面是个对象，对象必须有 install 方法，这个方法的参数由系统提供 Vue，不过仔细看思想是不是和原型法一模一样只不过，使用插件引用 的方法进行原型绑定的。
