vue传递值传递，slot

slot传递数值

• parent.vue

//在父组件里面通过slot-scope='p',{{p.属性}}来获取属性值,slot属性来获取子组件插槽，以name作为区分
<template>
<B :color="dataColor">
  <div slot="app" slot-scope="p">slot--{{p.slotName}}</div>
</B>
</template>

• child.vue

//子组件里面通过slot插槽，里面标明属性name来区分不同slot，通过v-bind:属性，
//在父组件里面通过slot-scope='p',{{p.属性}}来获取属性值
<template>
    <div>
        {{color}}--{{$attrs.color}}
        <slot name="app" :slotName="slotName"></slot>
        <button @click="changeSlot">改变slot</button>
    </div>

</template>

通过 $on，$emit传值

• 具体实现方式

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

• 实现示例
  • a.vue

   <template>
  <div>
    <button @click="send">发送a</button>
    <B></B>
    <C></C>
  </div>
</template>
<script>
  import B from './B.vue'
  import C from './C.vue'
  import util from '../util/util'
    export default {
        data(){
            return{
              name:'aaa'
            }
        },
        methods:{
          send(){
              util.Event.$emit('data-a',this.name);
          }
        },
        components:{
            B:B,
            C:C
        }
    }
</script>
<style scoped>
</style>

• b.vue

<template>
 <div>
     aaa
     <button @click="send">发送b</button>
 </div>

</template>

<script>
 import util from '../util/util'
 export default {
     data(){
       return{
         age:20
       }
     },
     methods:{
       send(){
           util.Event.$emit('data-b',this.age);
       }
     }
 }
</script>

<style scoped>

</style>

• c.vue

<template>
 <div>
     {{name}}--{{age}}
 </div>
</template>

<script>
import util from '../util/util'
 export default {
     data(){
       return{
         name:'ccc',
         age:''
       }
     },
   mounted(){
       util.Event.$on('data-a',name=>{
         this.name=name;
       })
       util.Event.$on('data-b',age=>{
         this.age=age;
       })
   }
 }
</script>

<style scoped>

</style>

• util.js

import Vue from 'vue'
var obj={
Event:new Vue()
}
export default obj;

vuex

• dispatch：操作行为触发方法，是唯一能执行action的方法。
• actions：操作行为处理模块,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
• commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
• mutations：状态改变操作方法，由actions中的commit(‘mutation 名称’)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
• state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
• getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
• $attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。
• 实例
• a.vue

<template>
  <div>
    <button @click="send">发送a</button>
    <B :foo="foo" :boo="boo" :coo="coo" :doo="doo" title="前端工匠" @click="send"></B>
  </div>
</template>

<script>
  import B from './B.vue'
  import util from '../util/util'
    export default {
        data(){
            return{
                name:'aaa',
                foo: "Javascript",
                boo: "Html",
                coo: "CSS",
                doo: "Vue"
            }
        },
        methods:{
          send(){
              util.Event.$emit('data-a',this.name);
          }
        },
        components:{
            B:B,
        }
    }
</script>

<style scoped>

</style>

• b.vue

<template>
    <div>
        <C></C>
    </div>

</template>

<script>
    import util from '../util/util'
    import C from './C.vue'
    export default {
        data(){
          return{
            age:20
          }
        },
        props:{
            foo:String
        },
        created(){
          console.log(this.$attrs); //{boo: "Html", coo: "CSS", doo: "Vue", title: "前端工匠"}
        },
        methods:{
          send(){
              util.Event.$emit('data-b',this.age);
          }
        },
        components:{
            C:C
        }
    }
</script>

<style scoped>

</style>

provide/inject

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

• a.vue

<template>
  <div>
    <B ></B>
  </div>
</template>
<script>
  import B from './B.vue'
    export default {
      provide:{
        name:"我是父组件"
      },
        data(){
            return{
            }
        },
        components:{
            B:B,
        }
    }
</script>
<style scoped>
</style>

• B.vue

<template>
    <div></div>
</template>
<script>
    export default {
        inject:['name'],
        mounted(){
            console.log(this.name);//我是父组件
        }
    }
</script>
<style scoped>
</style>

在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 我是父组件。这就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档
所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 我是父组件