vue组件间传值

一. 子组件向父组件传值 - $emit 发射事件

父子组件传值.png

1. 子组件$emit发射事件A

   this.$emit(event,...argument);
   /*
   * event: 要触发的事件
   * argument: 传给父组件的参数
   */ 
   例子：this.$emit('emitEvent',data,'lalala');

2. 父组件通过事件名A接收

<part-template @emitEvent = "ievent"></i-template>
methods:{
    ievent(...data){
        console.log('allData:',data);    // data为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串
    }
}

二. 父组件向子组件传值 - props传值

1. 在父组件import引入封装出去的子组件

import dialogAttendee from "../../activity/component/dialogAttendee";

2. 在父组件视图模板中，通过 : 变量 占位传值

<dialogAttendee :dialogcascaderVisible="dialogcascaderVisible" @dialogClose="dialogClose"></dialogAttendee>

3. 在子组件通过props接收值，像本组件的data中定义的变量一样使用(this获取)

props:{  
    dialogcascaderVisible: {
        type: Boolean,
        default: false
    },
    reservation:Array,
}

三. watch监听值变化

1. watch是一个对象，有键（要监听的对象），值（对象发生变化，执行的函数。
2. 值可以是函数，也可以是函数名。

data: {  
    c: {  
        name: '小强',  
        age: 20,  
        sex: '男'  
    },  
    tdArray:["1","2"],  
},  
watch: {
    a: function (val, oldVal) { //新值，旧值
      console.log('new: %s, old: %s', val, oldVal)
    },
    
    b: 'someMethod', // 函数名
   
    c: { // 包括选项的对象
      handler: function (val, oldVal) { /* ... */ }, //监听变化时执行回调函数
      deep: true，//监听对象的属性，需要深度监听；数组不需要。
      immediate: true
    }
    
    'c.name':function(val,oldval){ //键路径必须加引号
         console.log(val+"aaa")  
    }   
  }

四. 注意事项

1. 在Vue2中组件的props的数据流动只能单向流动。即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。
2. 父组件可以通过自定义属性向子组件传值；子组件通过props来接收；子组件不能直接修改父组件传递过来的数据；子组件可以通过$emit()方法去间接调用父组件中的方法去更改父组件中的数据。

五. 父组件引用封装出去的子组件

<template>  
    <div>  
        <testComponent></testComponent> <!-- 3.通过定义的子组件名以标签形式直接使用 -->  
    </div>  
</template>  
  
<script>  
    import testComponent from './testComponent.vue' //1.先使用import导入你要在该组件中使用的子组件  
    export default {  
        components: {testComponent}, //2.然后在components属性中写入子组件  
        methods: {},   
    }  
</script>  

六. 动态组件

1.通过使用预定义的标签< compnent >可以动态的绑定其is特性，使得多个组件有一个共同的挂载点，实现动态切换。

2. < keep-alive >标签会把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。

<button @click="toggle('home')">显示主页</button>
<button @click="toggle('list')">显示列表页</button>
<keep-alive>
    <component :is="currentView"></component>
</keep-alive>

//修改currentView变量，切换组件名
 methods: {
     toggle(com) {   this.currentView = home;  }
 }

七. 兄弟组件传值：bus总线传值

• 非父子组件之间不能直接通讯，必须使用“代理人”，即中央数据总线过渡。

var bus = new Vue();

• A组件向B组件传值，A组件中要通过bus总线触发相应的事件；

bus.$emit('sendtoTwo', this.one)

• B组件要在钩子函数中监听相应的事件。

mounted() {        // 监听sendtoTwo, 事件监听也可以写到created钩子函数
   bus.$on('sendtoTwo', (data) => {
       this.two = data;
   })
}