文章目录
父子组件通信
绝大部分 vue 本身提供的通信方式, 都是父子组件通信
prop
最常见的组件通信方式之一, 由父组件传递到子组件
event
最常见的通信方式之一, 当子组件发生了某些事, 可以通过 event 通知父组件
// father.vue
// 子组件传递多个参数
// 父组件必须使用 arguments 来接收
<template>
<div class="app-container">
123
<TestComp msg="hello vue" @change="handleEmit(arguments)" />
</div>
</template>
<script>
import TestComp from "./components/TestComp.vue";
export default {
name: "App",
components: {
TestComp,
},
methods: {
handleEmit(e) {
console.log(e);
console.log(e[0]);
console.log(e[1]);
}
}
}
</script>
// child.vue
<template>
<div @click="handleClick">
{{msg}}
</div>
</template>
<script>
export default {
name: "TestComp",
props: {
msg: {
type: String,
}
},
methods: {
handleClick() {
this.$emit('change', {1:1}, 1);
}
}
}
</script>
style 和 class
父组件可以向子组件传递 style 和 class, 他们会合并到子组件的根元素中
attribute
如果父组件向子组件传递了一些属性到子组件, 但子组件没有声明这些属性, 则他们称之为 attribute, 这些属性会直接附着在子组件的根元素上。
不包含 style 和 class, 他们会特殊处理
在子组件中可以通过$attrs 获取到传递的 attribute, 子组件可以修改 attribute
// 父组件
<template>
<div class="app-container">
123
<TestComp data-a="1" data-b="2" msg="hello vue" />
</div>
</template>
<script>
import TestComp from "./components/TestComp.vue";
export default {
name: "App",
components: {
TestComp,
}
}
</script>
// 子组件
<template>
<div>
</div>
</template>
<script>
export default {
name: "TestComp",
created () {
console.log(this.$attrs);
this.$attrs.msg = "xxx";
}
}
</script>
// 渲染结果
// 附着在子组件的根元素
<div class="app-container">
123
<div data-a="1" data-b="2" msg="hello vue">
</div>
</div>
子组件可以通过 inherit: false 配置, 禁止将 attribute 附着在子组件的根元素上, 但不影响通过 $attrs 获取
native 修饰符
在注册事件时, 父组件可以使用natice修饰符, 将事件注册到子组件根元素上
// 父组件
<template>
<div class="app-container">
123
<TestComp @click.native="handleClick(arguments)" />
</div>
</template>
<script>
import TestComp from "./components/TestComp.vue";
export default {
name: "App",
components: {
TestComp,
},
methods: {
handleClick(e) {
console.log('123', e);
}
}
}
</script>
// 子组件
<template>
<div>
456
</div>
</template>
<script>
export default {
name: "TestComp",
inheritAttrs: false,
}
</script>
点击子组件根元素, 可以触发父组件绑定的事件
$listeners
子组件可以通过$listeners 获取父组件传递的所有事件处理函数
// 父组件
<template>
<div class="app-container">
123
<TestComp @start="handleStart" @end="handleEnd" />
</div>
</template>
<script>
import TestComp from "./components/TestComp.vue";
export default {
name: "App",
components: {
TestComp,
},
methods: {
handleStart() {},
handleEnd() {}
}
}
</script>
// 子组件
<template>
<div>
456
</div>
</template>
<script>
export default {
name: "TestComp",
inheritAttrs: false,
created() {
console.log(this.$listeners);
}
}
</script>
这里输出的是对象的形式
// 函数名 :函数实现
func-name: function() {}
v-model
做双向绑定, 单独讲解
sync 修饰符
和v-model 的作用类似, 用于双向绑定, 不同点在于v-model只能针对一个数据进行双向绑定, 而sync修饰符没有限制。
sync是语法糖。
// 父组件
<template>
<div class="app-container">
<TestComp :num1.sync="n1" :num2.sync="n2"/>
<!-- 等同于 -->
<Numbers
:num1="n1"
@update:num1="n1 = $event"
:num2="n2"
@update:num2="n2 = $event"
/>
<!-- 等同于 -->
</div>
</template>
<script>
import TestComp from "./components/TestComp.vue";
export default {
name: "App",
components: {
TestComp,
},
data() {
return {
n1: 0,
n2: 0
}
},
methods: {
setTimeInterval() {
for(let i=1; i<100; i++) {
setTimeout(()=>{
console.log(this.n1, this.n2)
}, i*1000);
}
}
},
created() {
this.setTimeInterval();
}
}
</script>
// 子组件
<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>
在子组件中修改, 父组件传入的 num1, num2, 父组件的 n1, n2 也会变
$parent 和 $children
在组件内部, 可以通过$parent和$children分别获取当前组件的父组件和子组件
输出的子组件是一个数组, 包含当前组件中的所有组件。
$slots 和 $scopedSlots
todo
ref
父组件可以通过 ref 获取到子组件的实例。
可以获取组件实例或 html 元素。
跨组件通信
Provide 和 Inject
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
只能用于祖先和后代, 兄弟组件不可以
router
如果一个组件改变了地址栏, 所有监听地址栏的组件都会做出反应
常见场景: 通过点击 router-link组件改变了地址, router-view组件渲染其他内容。
router-link, router-view 是 vue-router 提供的组件。link改变地址, view 监听地址变化, 渲染内容。
vuex
使用于大型项目的数据仓库, 可以跟踪数据的变化。
mutation: 不能写异步操作
action: 可以写异步操作
store 模式
适用于中小型项目的数据仓库
// store.js
const store = {
loginUser: ...,
setting: ...
}
// compA
const compA = {
data(){
return {
loginUser: store.loginUser
}
}
}
// compB
const compB = {
data(){
return {
setting: store.setting,
loginUser: store.loginUser
}
}
}
组件 A 和 B 拿到 store 里的数据, 放到 data 中, 数据自动变成响应式。
// store.js
export default {
number: {
value: 1,
}
}
// 父组件
<template>
<div class>
<TestComp />
{{number.value}}
<button @click="number.value++">增加</button>
</div>
</template>
<script>
import TestComp from "./components/TestComp.vue";
import store from "./store";
export default {
name: "App",
components: {
TestComp,
},
data() {
return {
number: store.number
}
}
}
</script>
// 后代组件
<template>
<div>
{{number.value}}
<button @click="number.value++">增加</button>
</div>
</template>
<script>
import store from "../store";
export default {
data() {
return {
number: store.number
}
}
}
</script>
缺点: 无法跟踪数据的变化。 数据是在所有组件中共享的, 如果出现问题, 无法跟踪是那个组件修改的。
eventbus
一个组件触发一个事件, 把该事件传递到事件总线上, 监听对应事件的组件或普通模块会接收到 事件总线传递的消息。
- 提供监听某个事件的接口
- 提供取消监听的接口
- 触发事件的接口 (可传递数据)
- 触发事件后会自动通知监听者
// 事件总线
// 模拟实现一
const listeners = {
};
export default {
// 监听某一个事件
$on(eventName, handler) {
if (!listeners[eventName]) {
listeners[eventName] = new Set();
}
listeners[eventName].add(handler);
},
// 取消某个事件的监听
$off(eventName, handler) {
if (!listeners[eventName]) {
return;
}
listeners[eventName].delete(handler);
},
// 触发事件
$emit(eventName, ...args) {
if (!listeners[eventName]) {
return;
}
for (const handler of listeners[eventName]) {
handler(args);
}
},
}
// 模拟实现二
import Vue from 'vue'
Vue.prototype.$bus = new Vue({});
