正文
1. 使用 props
props 用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。这种方式，不能在子组件更改父组件的对应的属性值。
<!-- 父组件 --> <template> <child message="这是父组件给子组件的信息"></child> </template> <script> import Child from '../xxx/xxx' export default { components: {Child} } </script>
<!-- 子组件 --> <template> <div>{{message}}</div> </template> <script> export default { props: ['message'] } </script>
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。
若一定要改，只能通过子组件
$emit()，父组件$on()进行响应更改，如在更复杂的情况下，建议使用状态管理模式，即Vuex。下面会讲述这两种方式的具体使用方式。
2. $emit()、$on() 非父子组件间的通信（简单场景）
$emit()和$on()和的事件必须是在一个公共的实例上，才能触发。官方文档里这个主要用于非父子组件之间的通信。下面对这个例子简单修改一下：
// 新建一个公共示例 // bus.js import Vue from 'vue' export const bus = new Vue();
<!-- 父组件 --> <template> <child :message="message"></child> </template> <script> import Child from '../xxx/xxx' // 引入公共实例 import { bus } = from 'xxx/bus.js' export default { components: {Child}, data() { return { message: '这是父组件给子组件的信息' } }, mounted() { // $on() 响应 bus.$on('change', (msg) => { console.log(msg); }) } } </script>
<!-- 子组件 --> <template> <div>{{message}}</div> </template> <script> import { bus } from 'xxx/bus.js' export default { props: ['message'], watch: { message(newVal, oldVal) { // 通过 $emit() 去触发 bus.$emit('change', '要改变的值') } } } </script>
3. 使用 Vuex 进行状态管理（主要用于较为复杂场景），划重点
1). 安装 Vuex。
npm install vuex --save
2). 新建 store.js ，将 vuex 放在里面，我就不放 main.js 里了
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) /** * 说明： * * 一、Mutations * 1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation * 2. 一条重要的原则就是要记住 mutation 必须是同步函数 * * 二、Action * 1. action 提交的是 mutation，而不是直接变更状态 * 2. action 可以包含任意异步操作 * 3. 所以我更喜欢使用 action 去提交 mutation，例如下面这个异步操作 * */ const store = new Vuex.Store({ // 定义状态 state: { message: '' }, mutations: { changeMessage(state, payload) { // 状态变更 state.message = payload; } }, actions: { changeMessage(context, args) { context.commit('changeMessage', args); setTimeout(() => { // 1.5s 后置空 context.commit('changeMessage', '') }, 1500); } } }) export default store
3). main.js 引入
import Vue from 'vue' import App from './App.vue' import store from './store.js' new Vue({ el: '#app', store, render: h => h(App), })
4). 提交载荷、分发Action、获取状态
// 以下 this 指向 vue 实例 // 提交Payload，仅支持同步操作 this.$store.commit('changeMessage', 'any'); // 分发 Action，支持异步操作 this.$store.dispatch('changeMessage', 'any'); // 获取 state let var1 = this.$store.state.message;
写得有点啰嗦了，更具体或者细节的地方，麻烦移步官方文档： Vuex 是什么？
啊啊啊，不想写了，好了，就到此为止吧。有疑问的留意，尽我所会的回答。（如有更好的方式，或者改进的地方，欢迎指出！）
