1. 父子组件的通信
1. 父组件利用 props 向子组件传输数据
- // 父组件:
- <div>
- <child v-bind:my-message="parentMsg"></child> // 注意传递参数时要用 - 代替驼峰命名, html 不区分大小写
- </div>
- // 子组件:
- //props 可以是数组或对象, 用于接收来自父组件的数据. props 可以是简单的数组, 或者使用对象作为替代, 对象允许配置高级选项, 如类型检测, 自定义校验和设置默认值.
- vue.component('child', {
- props:[myMessage],
- template: '<span>{{ myMessage }}</span>'
- })
- Vue.component('child', {
- props:{myMessage},
- template: '<span>{{ myMessage }}</span>'
- })
- Vue.component('child', {
- props:{
- myMessage:{
- type:Object, // 类型
- default:{} // 默认值
- }
- },
- template: '<span>{{ myMessage }}</span>'
- })
如上所示, 父组件在模板中引用子组件, 通过 v-bind 传递参数 myMessage, 值为 parentMsg, 其可以为父组件中的动态属性. 在利用 props 实现传值的过程中理论上是要实现单向传递, 即父组件改变相关参数的值, 子组件也相应变化, 但是子组件对参数的改变不应该影响父组件. 但是当 props 中接收的是父组件传递的引用类型 (对象或者是数组) 时, 在子组件中对数据改变时, 父组件中的数据也会相应的改变, 因为两者是指向的同一地址内存. 如果不想子组件的改变影响父组件可以利用深拷贝, 将接受的数据进行深拷贝后在子组件中使用, 而不直接操作接受的数据. 深拷贝可以直接利用 ES6 中的 obj=Object.assign({},myMessage)(在 computed 中定义), 这样子组件的改动将不会影响到父组件.
2. 子组件向父组件传递参数利用事件机制
子组件通过 this.$emit()派发事件, 父组件利用 v-on 对事件进行监听, 实现参数的传递
- // 子组件:
- this.$emit('changeCart',event.target)/* 向父组件派发事件, 同时传递参数 event.target, 后面的参数的个数不限 */
- // 父组件:
- <v-cartcontrol :food="food" v-on:changeCart="changeCart"></v-cartcontrol>
- <v-cartcontrol :food="food" @changeCart="changeCart"></v-cartcontrol>
同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层, 不然直接在顶层监听子组件的子组件的事件是监听不到的, 需要先向父组件派发, 父组件在向上层触发
3. 利用 ref 属性可以获取到 dom 元素或者是子组件, 从而可以调用子组件的方法(注意 2.0 版本用 ref 取代了 el)
1, 当 ref 直接定义在 dom 元素上时, 则通过 this.$refs.name 可以获取到 dom 对 dom 进行原生的操作
<div class="foods-wrapper" ref="foods-wrapper">
通过 this.$refs 获取到 dom 进行操作(注意 ref 属性的命名不能用驼峰, 同时获取的时候也是)
let menuList=this.$refs['menu-wrapper'].getElementsByClassName('menu-list-hook');// 此处如果用 this.$refs["menuWrapper"]将获取不到元素
2, 通过在引用的子组件上使用 ref 属性实现父组件调用子组件的方法以及属性
在父组件中引用子组件并定义 ref
<v-food ref="selectfood"></v-food>
调用定义在子组件中的方法 show
this.$refs.selectfood.show();// 同时也可以调用子组件中的属性
2. 非父子组件的通信
最近在做登录部分时遇到一个场景, 当点击 "用户" 按钮时, 首先渲染 login 组件, 在用户登录后直接跳转到用户信息界面(user 组件). 这里遇到了需要将 login 组件通过异步请求获得的用户信息传向 user 组件, 但是 login 和 login 组件不是父子组件, 就暂称为兄弟组件吧. 简而言之, 我要解决的就是兄弟组件之间的信息传递问题.
- // 位于 login.vue 中
- export default {
- methods:{
- login(){
- this.$axios({
- method: 'post',
- url: '/student/login/',
- data: {
- username: this.username,
- password: this.password
- }
- })
- .then(function (response) {
- this.$router.replace({path: 'user'});
- }.bind(this))
- .catch(function (error) {
- console.log(error);
- alert('用户名或密码错误');
- });
- }
- }
- }
在异步请求完成后, 就跳转到 user 组件中, 但是 response 的请求返回信息就无法传到非父子组件的 user 组件中.
1. 使用 eventBus
- // 非父子关系的两个组件之间也需要通信. 在简单的场景下, 可以使用一个空的 Vue 实例作为事件总线:
- var bus = new Vue()
- // 触发组件 A 中的事件
- bus.$emit('id-selected', 1)
- // 在组件 B 创建的钩子中监听事件
- bus.$on('id-selected', function (id) {
- // ...
- })
最好先新建一个 js 文件, 来创建出我们的 eventBus, 我们把它命名为 bus.js
- import Vue from 'vue';
- export default new Vue();
然后在 login.vue 文件中:
- // 位于 login.vue 中
- import Bus from '../bus.js';
- export default {
- methods:{
- login(){
- this.$axios({
- method: 'post',
- url: '/student/login/',
- data: {
- username: this.username,
- password: this.password
- }
- })
- .then(function (response) {
- /*
- * 这里的'login-on'是在 Bus 中自己构造的一个事件 (不需要在别处申明), 通过 emit() 函数
- * 手动触发这个事件, 然后在 user.vue 中可以监听这个事件, 一旦发现事件触发, 就可以利用
- * 回调函数接收 response 这个对象, 达到信息传递的目的
- * */
- Bus.$emit('login-on',response);
- this.$router.replace({path: 'user'});
- }.bind(this))
- .catch(function (error) {
- console.log(error);
- alert('用户名或密码错误');
- });
- }
- }
- }
在 user.vue 文件中:
- // 位于 user.vue 中
- import Bus from '../bus.js';
- export default {
- mouted : {
- Bus.$on('login-on', message => { // 这里的 message 就是从 login.vue 中传来的数据
- console.log(message);
- });
- }
- }
但是在测试时发现在 user.vue 组件的监听 没有被触发
分析: 在我遇到的情境中, login.vue 组件和 user.vue 组件是互相替代的关系, 即需要从 login 组件通过 vue-router 跳转到 user 组件, 在 login.vue 销毁后才开始渲染 user.vue 组件, 所以在 user.vue 中的监听是在事件以及触发之后才开始, 自然不会产生回调函数.
由此可以看出, 官方推荐的 eventbus 解决方案的缺陷在于, 在数据传递过程中, 两个组件必须都已经被渲染过. 这种情景下, 这种方法不适用.
2. 使用 vuex
vue--vuex 的简单理解
最好在 src 的根目录下新建一个文件, 叫 store.js
- // 位于 store.js 中
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex);
- export default new Vuex.Store({
- /*
- * state 指的就是储存的数据,
- * 下面的数据是我在项目中需要用的数据字段
- * */
- state: {
- has_login: false,
- id: 1,
- mobile_num: '',
- name: ''
- },
- /*
- * mutations 里面规定的就是想要改变 state(数据)的动作函数,
- * 下面的 user_message 就是我将传入的 message 赋值给仓库中的
- * state 数据字段, 达到更新数据的目的
- * */
- mutations: {
- user_message (state, message) {
- state.has_login = true;
- state.id = message.data.id;
- state.mobile_num = message.data.mobile_num;
- state.name = message.data.name;
- }
- }
- })
然后在 login.vue 组件中, 提交收到的用户信息
- // 位于 login.vue 中
- import userMessage from '../store';
- export default new Vuex.Store({
- methods: {
- loginSubmit () {
- this.$axios({
- method: 'post',
- url: '/student/login/',
- data: {
- username: this.username,
- password: this.password
- }
- })
- .then(function (response) {
- // 这里调用 store.js 中 mutations 里面的 user_message 函数, 从而改变仓库中的 state 数据
- userMessage.commit('user_message', response);
- this.$router.replace({path: 'user'});
- }.bind(this))
- .catch(function (error) {
- console.log(error);
- alert('用户名或密码错误');
- });
- }
- })
最后在 user.vue 组件中接收 vuex 仓库中存储的信息, 即先引入仓库
- // 位于 user.vue 中
- import userMessage from '../store';
然后可以直接将 userMessage.state 赋值给 user.vue 作用域中的数据字段, 同时, vuex 的 state 有热更新的属性, 对于数据的同步很有帮助, 优点良多.
来源: http://www.qdfuns.com/article/18271/58ff612287247ec297ecaf450c0b7da2.html