Vue组件间通信
父子组间通信
通过props向子组件传值，通过事件向父级组件发送消息
通过props向子组件传值
- 由于大小写不敏感，所以驼峰会转换为短横命名
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
- 传递静态或动态 Prop
// 传递静态值
<blog-post title="My journey with Vue"></blog-post>
// 传递动态值，使用v-bind语法，使用规则和普通文件使用方式一样。
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
props是单向数据流，父组件更新会引发子组件更新
当试图改变props时，通常的做法是props本地化，进入子组件data或者计算属性中Tip
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
通过事件向父级组件发送消息
- 子组件注册事件
// 传输额外参数
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
- 父组件接受事件
<blog-post v-on:enlarge-text="onEnlargeText"
></blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
- 在组件上使用 v-model
<custom-input v-model="searchText"></custom-input>
等价
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
兄弟组件通信
简单的store模式
可以直接多个vue实例中共享一个数据，当引用数据发生变化的时候多个实例视图会发生变化。这是最简单的的通信方式。但是基本没有调试。
进化模式：store，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction (newValue) {
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction () {
if (this.debug) console.log('clearMessageAction triggered')
this.state.message = ''
}
}
// 使用
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
eventBus
- 定义一个EventBus.js文件
import Vue from 'vue';
export const EventBus = new Vue();
- A组件中触发事件
import { EventBus } from './event-bus.js';
EventBus.$emit('i-got-clicked', this.clickCount);
- B组件中监听事件
import { EventBus } from './event-bus.js';
// 监听事件以及payload
EventBus.$on('i-got-clicked', clickCount => {
console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});
Vuex
详见Vuex使用
