On learning of the components of the communication vue

vue simplify the use of the components we write code complexity, often the case there will be data transfer between components, then how communication between components is it?

Use props to transfer data

Scoped component instance is isolated. This means you can not (and should not) reference data directly within the parent component template subcomponents. The parent element data need to be sent to prop subassembly.

假设我们现有一个这样的父组件

        var vm = new Vue({
            el: "#app",
            data: { parentMessage: 'h' }, components: { Child } })

You can see the registration of a sub-assembly Child, as well as a data parentMessage data in the parent element in
the next parentMessage how we get it in the sub-components of the Child?
Written in the sub-assembly

var Child = {
            //声明当前组件内部能够接受一个message的属性，如果是驼峰式命名，在传参数的时候使用短横线连接的小写
            props: ["message", "myMessage"],
            template: '<span>{{message}} {{myMessage}}</span>' }

In subassemblies We wrote a parent to receive transmitted from the data component in the custom properties mymessage props, and then passed through the assembly in the parent custom properties

<div id="app">
        <child message="hello" :my-message="parentMessage"></child> <child message="hi"></child> <input type="text" v-model="parentMessage"> </div>

We use the above code custom attributes received my-message data are defined parentMessage parent component and then pass this data to the display subassembly to effect the following, we got the parent components parentMessage

Changes to the data received after the props

Here I just recorded it with a calculated property subcomponents to modify to get the data from the parent component

<div id="app">
        <child :size="parentSize"></child> </div> <script src="./vue.js"></script> <script> var Child = { template: '<div>{{size}}</div>', props: ['size'], } var vm = new Vue({ el: '#app', data: { parentSize: 'THREE' }, components: { Child } }) </script>

As the code transmitted parentSize get parent components subassemblies using methods previously mentioned, if the sub-assembly to write directly to a parent element method to modify the data is not possible in the way data flow vue, where we can the parentSize into a property to operate, equivalent to another creates an object
so we wrote a computed in the calculation of property subassemblies child, in which a write property normalSize, to the size all lowercase

computed: {
   normalSize() {
     return this.size.trim().toLowerCase();
   }
}

Add the calculated attribute is displayed in the template normalSize subassembly

template: '<div>{{size}} {{normalSize}}</div>'

The results are as follows

Through and display an array of parent component coming

The data in the parent assembly declares an array lis

    var vm = new Vue({
                el: "#app",
                data: {
                    lis: ['a', 'b', 'c'] }, components: { List } }) 

Obtained and traversal subassembly

var List = {
   template: '<div><div v-for="item in lists">{{item}}</div></div>', props: ['lists'] }

Then displayed in the parent component template in the subassembly

    <div id="app">
        <list :lists="lis"></list> </div> 

Here is to be noted the data transfer process
above all, by the same template as before to give an array of custom properties in the parent component template, then transferred to the subassembly to use

Sons non-communication between components

To enable communication between components on a non-father and son have to say $ emit
events that can be customized to listen issued here by me explain a little example

Subassemblies event realization parent component data changes

Here is an example of a click on the sub-assemblies allow a parent component count clicks count of

<div id="app">
        {{total}}
        <!--在child组件中添加一个监听事件来监听自定义事件add-parent-total，当触发本事件时执行父组件中的addTotal方法使得total改变--> <child @add-parent-total="addTotal"></child> <child></child> </div> <script src="vue.js" charset="utf-8"></script> <script> var Child = { template: '<button @click="add">{{counter}}</button>',//子组件模板的button中添加一个点击事件，来调用子组件中的方法，add data() { return { counter: 0 } }, methods: { //在子组件中写一个方法来通过$emit触发一个自定义的add-parent-total事件 add() { this.counter++; this.$emit('add-parent-total'); } } } var vm = new Vue({ el: '#app', data: { total: 0 }, methods: { addTotal(preload) {//在父组件添加一个方法，来操作父组件中的数据total this.total += 1; } }, components: { Child } }) </script>

In the example above, we still can not bypass the sub-components can not change the fact that the parent component in the content, but we triggered by a parent component template custom events, so call your own parent component own way, they changed their content, use a custom event and $ emit way

Sons non-communication assembly

When the non-parent-child communication component of our implemented by an empty vue objects
first declare an instance of vue

var vm = new Vue({
            el: '#app',
            data: { }, components: { AppHead, AppBody } })

Registered in the instance of the two components, both of them be brothers components, we let the two brothers components communicate

Followed by a statement of empty instance vue

var bus = new Vue()

Then to write two sub-assemblies

var AppHead = {
            template: '<div><button @click="add">添加</button></div>',
            methods: {
                add() {
                    bus.$emit('change', 1)
                }
            }
        }
        var AppBody = { template: `<div>{{counter}}</div>`, data() { return { counter: 0 } }, created() { bus.$on('change', count => { this.counter += count }) } }

In AppHead components we let it be clicked to trigger an add method, this method is used to add custom event-based issue a change bus issued
then will write a moment to listen bus after AppBody is created change in the AppBody the method of the event, so the event is triggered once the change will monitor the implementation of this event, it enables communication between the brothers components

To add a template on the parent component of the two brothers components into effect to achieve

 

<div id="app">
        <app-head></app-head> <app-body></app-body> </div>