共计 4947 个字符，预计需要花费 13 分钟才能阅读完成。
父子组件通信
prop
event
style 和 class
natvie 修饰符
$listeners
v-model
sync 修饰符
$parent 和 $children
$slots 和 $scopedSlots
ref
跨组件通信
Provide 和 Inject
router
vuex
store 模式
eventbus
父子组件通信
prop
最常见的组件通信形式，由父组件向子组件传递。prop 可接管一个数组或对象
// 子组件
<script>
export default {
name: "Comp",
// 数组形式 props：[....]
// ↓ 对象形式
props: {
datas: {
type: Object,
default: () => {return {};
}
},
}
</script>
event
子组件向父组件发送告诉，并传递参数
子组件
methods:{
// 通过 $emit 向父组件发送一个告诉
handleEvent(){this.$emit('eventMsg', option)
}
}父组件
methods:{
// 监听子组件定义的办法
eventMsg(option){console.log(option);
}
}style 和 class
父组件能够向子组件传递 style 和 class，style 和 class 将合并到子组件根元素上
父组件
<template>
<div id="app">
<HelloWorld
style="color:red"
class="hello"
msg="Welcome to Your Vue.js App"
/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {HelloWorld,},
};
</script>
子组件
<template>
<div class="world" style="text-align:center">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {msg: String,},
};
</script>
最终渲染后果
<div id="app">
<div class="hello world" style="color:red; text-aling:center">
<h1>Welcome to Your Vue.js App</h1>
</div>
</div>
attribute
父组件在应用子组件时，在子组件上定义一些属性，这些属性将作用于子组件的根元素上，然而不包含 style 和 class
父组件
<HelloWorld data-a="1" data-b="2" msg="Welcome to Your Vue.js App" />
子组件
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {msg: String,},
created() {
// 通过 $attrs 获取父组件定义的 attribute
console.log(this.$attrs); // {"data-a":"1","data-b":"2"}
},
};
</script>
最终渲染后果
<div id="app">
<div data-a="1" data-b="2">
<h1>Welcome to Your Vue.js App</h1>
</div>
</div>Tip：子组件能够通过定义 inheritAttrs：false 来缓和 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据
natvie 修饰符
在注册事件时，父组件能够通过 navite 修饰符，将事件注册到子组件根元素上
父组件
<template>
<div id="app">
<HelloWorld @click.native="handleClick" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {HelloWorld,},
methods: {handleClick() {console.log(1);
},
},
};
</script>
子组件
<template>
<div>
<h1>Hello World</h1>
</div>
</template>
最终渲染后果
<template>
<div id="app">
<h1>Hello World</h1>
</div>
</template>
// 当点击 app 时。会触发父组件定义的 handleClick 办法
$listeners
子组件能够通过 $listeners 获取父组件传递过去的所有处理函数
v-model
父组件在应用子组件时，能够在子组件上绑定 v -model，子组件通过定义 model 的 prop 和 event 还获取父组件定义的值
父组件
`
<Compn v-model=”datas” />
`
子组件
<script>
export default {
// 分类筛选组件
name: "sortFilter",
// 定义实现 v -modal 的属性与事件
model: {
prop: "value",
event: "change"
},
props: {
// 绑定的值
value: {type: [String, Number],
default: ""
}
},
created() {console.log(this.value)
},
</script>
sync 修饰符
和 v-model 相似，用于双向数据绑定，不同点在于 v-model 只能针对一个数据进行绑定，而 sync 修饰符没有限度
子组件
<template>
<div>
<p>
<button @click="$emit(`update:num1`, num1 - 1)">-</button>
{{num1}}
<button @click="$emit(`update:num1`, num1 + 1)">+</button>
</p>
<p>
<button @click="$emit(`update:num2`, num2 - 1)">-</button>
{{num2}}
<button @click="$emit(`update:num2`, num2 + 1)">+</button>
</p>
</div>
</template>
<script>
export default {props: ["num1", "num2"],
};
</script>
父组件
<template>
<div id="app">
<Numbers :num1.sync="n1" :num2.sync="n2" />
<!-- 等同于 -->
<Numbers
:num1="n1"
@update:num1="n1 = $event"
:num2="n2"
@update:num2="n2 = $event"
/>
</div>
</template>
<script>
import Numbers from "./components/Numbers.vue";
export default {
components: {Numbers,},
data() {
return {
n1: 0,
n2: 0,
};
},
};
</script>
$parent 和 $children
在组件外部，能够通过 $parent 和 $children 属性，别离获取以后组件的父组件和子组件实例
<template>
<div class="hello">
<button @click="handelParent"> 获取父组件实例 </button>
<button @click="handelChild"> 获取子组件实例 </button>
<Child />
</div>
</template>
<script>
import Child from "./Children.vue";
export default {
name: "HelloWorld",
props: {msg: String,},
components: {Child,},
methods: {handelParent() {console.log("父组件实例：", this.$parent);
},
handelChild() {console.log("子组件实例", this.$children);
},
},
};
</script>
ref
在应用组件时，能够通过在组件上定义 ref 来获取组件实例
<template>
<div class="hello">
<button @click="handelChild"> 获取子组件实例 </button>
<Child ref="child" />
</div>
</template>
<script>
import Child from "./Children.vue";
export default {
name: "HelloWorld",
props: {msg: String,},
components: {Child,},
methods: {handelChild() {console.log("子组件实例", this.$refs.child);
},
},
};
</script>
跨组件通信
provide 和 Inject
provide 和 inject 能够实现深层组件通信，顶层组件只需定义 provide，底层组件通过 inject 承受数据
顶层组件
// 父组件
provide(){msg:'hello Children'},
// 子组件
inject: ['msg']
created () {console.log(this.msg) // hello Children
}
router
如果一个组将扭转了地址栏，所有监听地址栏的组将都会做出相应的扭转，
// 监听路由变动
watch:{$route(to,from) {console.log(to,from);
}
}
vuex
vuex 过于轻便，通常不倡议在小型我的项目中应用，小型我的项目能够应用 store 或 eventbus 代替 vuex，vuex 实质上就是一个数据仓库。在此不做过多赘述，先挖一个坑，下回再叙。
store 模式
store 模式其实就是一个一般的 js 模块，各组件能够导入该模块，将数据放到 data 外面，此时 store 就具备响应式了。
// 导出一个 store.js 模块
export default {userInfo:{...},
loginInfo:{...}
}
// A 子组件导入 store 模块
import store from './store.js'
export default {
name:'Acompon',
data(){userInfo: store.userInfo}
}
// B 子组件导入 store 模块
import store from './store.js'
export default {
name:'Bcompon',
data(){loginInfo: store.loginInfo}
}
tip: store 模式的毛病是无奈跟踪数据的扭转，因为所有组件都能够更改数据
eventbus
eventbus 事件总线相当于一个桥梁，作为所有组将的一个事件核心，所有组件皆可往 eventbus 外面注册事件，也能够监听事件。
// 定义一个 eventbus 模块
import Vue from 'vue'
export const EventBus = new Vue()
// 在 main.js 里导入该模块并挂载到全局
// main.js
import eventbus from './eventbus.js'
Vue.prototype.$eventBus = eventbus
所有子组件向 eventbus 里组 注册 或者 监听 事件
// 组件 A 通过 $emit() 注册事件
sendMsg() {this.$eventBus.$emit("aMsg", 'from A');
}
// 组件 B 通过 $on 监听事件
this.$eventBus.$on("aMsg", (msg) => {
// A 发送来的音讯
console.log(msg) // from A
})
// 通过 $off() 能够敞开事件
正文完
