【组件间的通信】
父子组件通信
根据业务需求来看 绝大部分的通信都是属于父子组件之间的通信prop
最常见组件通信方式,由父组件传入后prop获取event
同上 此属于子组件发生某些事情之后可以通过event进行通知示例效果已省略
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
如果父组件传递了一些属性到子组件,但子组件并没有声明这些属性,则它们称之为attribute,这些属性会直接附着在子组件的根元素上父组件
<template>
<div id="app">
<!-- 除 msg 外,其他均为 attribute -->
<HelloWorld
data-a="1"
data-b="2"
msg="Welcome to Your Vue.js App"
/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld,
},
};
</script>
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
created() {
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>
能用到基本很少 但也算通信一种
子组件可以通过inheritAttrs: false配置,禁止将attribute附着在子组件的根元素上,但不影响通过$attrs获取
natvie修饰符
在注册事件时,父组件可以使用native修饰符,将事件注册到子组件的根元素上父组件
<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>
渲染结果
<div id="app">
<!-- 点击该 div,会输出 1 -->
<div>
<h1>Hello World</h1>
</div>
</div>
也是附着在根元素
$listeners
子组件可以通过$listeners获取父组件传递过来的所有事件处理函数, 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。v-model
数据双向绑定 原理就是 数据同步和数据更新 见后面 梳理(三) > https://editor.csdn.net/md/?articleId=121527214$parent和$childrenl
在组件内部,可以通过$parent和$children属性,分别得到当前组件的父组件和子组件实例v-ref
父组件可以通过ref获取到子组件的实例【跨组件通信】
Provide和Inject
示例
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
相当于你的前辈【抛出】一个可采集的属性,他的后代就可以通过【拾取】拿到
router
如果一个组件改变了地址栏,所有监听地址栏的组件都会做出相应反应最常见的场景就是通过点击router-link组件改变了地址,router-view组件就渲染其他内容
简单来说就是 当A改变router之后 B会跟随者变化 这也算间接通信
vuex
见后单独说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
}
}
}