VUE组件传值

父子组件传值：

1.父组件中定义值

2.在父组件中调用、注册、引用子组件

调用：

注册：

引用：

3.把父组件的值绑到子组件上

 

注意：

但是注意要用v-bind：绑定要传的值，不用v-bind直接把值放到标签上，会被当成html的节点属性解析的。

4.自组件内部接受父组件传过来的值：prop（）

 

但是要有注意的点：

子组件接受父组件的值分为———引用类型和普通类型两种，

普通类型：字符串、数字、布尔值、空

引用类型：数组、对象

其中，普通类型是可以在子组件中更改，不会影响其他兄弟自组件内同样调用的来自父组件的值，

但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果是：其他同样引用了改值的自组件内部的值也会跟着被修改。

普通类型的数据修改之后的警告：

警告：避免直接对一个道具进行修改，因为当父组件重新呈现时，该值将被覆盖。相反，使用基于支柱的数据或计算属性。

 

 

子组件向父组件传值

this.$emit(event,...args);/** event: 要触发的事件* args: 将要传给父组件的参数*/

子组件

父组件：

参考文档

https://www.cnblogs.com/padding1015/

 

 

 

eventBus(不同组件之间的传值：小项目少页面使用)

简单的状态管理，可以用vue bus

vue bus可以实现不同组件间、不同页面间的通信，比如我在A页面出发点击事件，要B页面发生变化，使用方法如下：

全局定义：main.js

var bus = new Vue();
Vue.prototype.bus = bus；

或者

window.eventBus = bus;

在A页面的事件中触发：

this.bus.$emit('todo','123')

或者

eventBus.$emit('todo', '123')

在B页面的created中开始监听，越早监听越好：

this.bus.$on('todo',(params)=>{
   console.log(params);
});

或者

eventBus.$on('todo', (params) => {

         console.log(params)

})

// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
  beforeDestroy () {
    bus.$off('get', this.myhandle)
  },

vueX(不同组件之间的传值：大项目多页面使用)