We know that direct data transferred through the inter-tag assembly Sons attribute data line to hang on the label

Subassembly to acquire data from a parent element rendering properties verified by props

In the non-parent-child assembly borrow the principle diagram is as follows

The first sub-pass from father to son Father

Features: the value to pass through the parent element constantly looking dependencies between various components of a complicated operation for one transfer assembly Sons Brothers

code show as below:

//子组件1传值到父组件
<template>
    <div>
<!--        第一种方法属性传递-->
        <input type="text" v-model="val" @change="add">请输入
    </div>
</template>
<script>
    export default {
        data() {
            return {
                val: ""
            }
        },
        methods: {
            add() {
                //第一中方法
                 this.$emit('test',this.val);
                你在这里触发那个事件 在需要的页面就监听谁
                this.val = "";
            }
        },
    }
</script>
//父组件
<template>
    <div>
<!--        父组件-->
        <add-student @test="test"></add-student>
        <student-list :list="list"></student-list>
    </div>
</template>
<script>
    import addStudent from '@/components/learn/addStudent.vue';
    import studentList from '@/components/learn/studentList';
    export default {
        data() {
            return {
                list:[]
            }
        },
        methods: {
            test(name) {
                this.list.push(name);
                console.log(this.list)
            }
        },
        components:{
            addStudent,
            studentList
        }
    }
</script>

<style scoped>

</style>
//子组件2接受数据
<template>
    <div>
        <span>你的数据</span>
        <ul>
            <li v-for="(item,index) in list">
                {{list[index]}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        //属性传值需要props
         props: {
             list: {
                 type: Array,
        
             },
         },
         第二种事件总线
        data() {
            return {
                list: []
            }
        }
    }
</script>

<style scoped>

</style>

Event Bus add a new instance on the prototype vue vue entire object (the object) of the object for all components vue all

Features: need () function is registered when each component in the life cycle of acquired data from the function create a custom event on the prototype, when the component for a long time need to monitor events too much for a small number of components use (you can also between different layers)

code show as below

//main.js
Vue.prototype.state = new Vue();
//实例对象原型上添加新的vue对象  为所有vue组件共有  兄弟子组件可以直接使用 不用经过父组件
子组件1
<template>
    <div>
<!--        第二种事件总线-->
        <input type="text" v-model="val" @change="add">请输入
    </div>
</template>

<script>
    export default {
        data() {
            return {
                val: ""
            }
        },
        methods: {
            add() {
                //你在这里触发那个事件 在需要的页面就监听谁
                // console.log(this,this.state);
                //第二种方式
                this.state.$emit('test1',this.val);
                this.val = "";
            }
        },
    }
</script>

<style scoped>

</style>
//子组件2
<template>
    <div>
        <span>你的数据</span>
        <ul>
            <li v-for="(item,index) in list">
                {{list[index]}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        // 第二种事件总线
        data() {
            return {
                list: []
            }
        },
        created() {
            //利用该方法监听自定义事件
            this.state.$on('test1',name => {
                this.list.push(name);
                console.log(this.list)
            })
        }
    }
</script>

<style scoped>

</style>

---------------------------------------------------------------------------------------------------------------

vuex part

The third vuex common data pool state

vuex as a common data pool data inside any of the components used for the usage rule

note

1, the various components of the data acquisition method for data pool this. $ Store.state.xxx

2, because the data relating to changes in recommendations received data (received data in three ways) is calculated using the attribute subassembly

        //第一种
        computed: {
            age() {
                return this.$store.state.age;
            }
        },
        //第二种
        computed:mapState(['name','age','look']),
        //第三种
        computed:{
            ...mapState({
                storeName:state => state.name,
                storeName:state => state.name,
                storeName:state => state.name,
            })
        },

3, in view of the complicated calculation property returns data objects introduced mapState

import {mapState} from 'vuex'

This object is used to operate on data from the data pool

vuex getters (corresponding to the calculated attribute)

The scenario data when using the subassembly needs to be used if the data processing state of other components will affect the data can be processed in case of getters

state data equivalent to the general store fixed data only when the data changes two components are synchronized before they can quote you change data at the same time I can change

Note: references to sub-assemblies to be different from the time in the form of state function arrows direct you to fill in the variable name on the list

其次getters还可以添加参数如下所示，无论是state getters本质上都是对象可以一对象形式访问各个池中的数据

import {mapGetters} from 'vuex'

vuex  store中
    getters: {
        newList (state,getters) {
            console.log(state);
            console.log(getters);
            console.log(getters.caonima);
            return  'hao'
        },
        caonima() {
            return 'nima'
        }
    },
//组件中
computed:{
            ...mapState({
                stdList:state => state.stdList,
                storeName:state => state.name,
                storeAge:state => state.age,
            }),
            ...mapGetters({
                newList:'newList'
            })
        },