vue transfer value is passed, slot

Numerical transmission 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>

by $on，$ EMIT traditional values

• Specific implementations

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

• Implementation Example
  • 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: operating behavior trigger method is the only method capable of performing the action.
• actions: operational behavior processing module, triggered by assembly $ store.dispatch ( 'action name', data1). Then the commit () call to trigger mutation, indirect update state. Responsible for handling all interactions Vue Components received. Comprising synchronous / asynchronous operation, support the methods of the same name, which in turn triggers the order of registration. Request to the backend API operations on in this module, including trigger other action and submit the operation mutation. This module provides Promise package to support the action triggered a chain.
• commit: commit operation state change method. Submit to mutation, it is the only way to perform mutation of.
• mutations: changing the operating state of the method, the actions triggered by the commit ( 'mutation name'). Is the only recommended method Vuex modify the state. This method can only operate synchronously, and the method name can only be globally unique. Among the operation there will be some hook exposed to monitor the state and so on.
• state: Page Status Management container object. Vue components centrally stored in data objects scattered data, globally unique, unified state management. Page required to display data read from the subject, using the fine-grained data Vue response mechanism to perform efficient update.
• getters: state method for reading objects. FIG not separately listed in the module, should be included in the render in, Vue Components read global target state by this method.

$attrs/$listeners

• $ Attrs: contains prop parent scope is not recognized (and obtain) the binding properties (except for class and style). When a component does not declare any prop, where the parent scope includes all bindings (other than class style), and can be v-bind = "$ attrs" Incoming internal components. Usually used in conjunction with inheritAttrs option.
• $ Listeners: contains the parent scope (excluding .native decorator) v-on event listener. It can be v-on = "$ listeners" Incoming internal components
• $ Attrs and $ listeners are two objects, $ attrs in the parent component is stored in a non-binding Props property, $ listeners is stored in the event of non-native parent components bound.
• Examples
• 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 dependent component allows an ancestor to all future generations injection, no matter how deep the component level, and since the establishment of the relationship between the upstream and downstream is always time to take effect

• 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>

In A.vue, we set up a provide: name, value boats sailing in the waves, its role is to name this variable available to all of its subcomponents. In B.vue by inject into a variable name from A to provide the components, then the component B, it can directly through this.name access to this variable, and its value is also my parent component. This is the core usage provide / inject API.

Note that: the Provide and inject bindings can not respond . This is deliberate. However, ---- vue official document if you pass an object that can listen, then the properties of an object can respond or
so above A.vue If the name has changed, B.vue of this.name is not will change, I'm still a parent component