vue组件间的传值

vue组件间的传值

组件之间的传值有：父传子、子传父、兄弟之间传值

1、父传子

父组件parent

// 父组件里面引入使用子组件children，使用v-bind（:）绑定传递给子组件
<template>
    <div class="wrapper">
        // 子组件
    	<Children :data-list="dataList">
    </div>
</template>
<script>
    import Children from '/Children.vue'
    export default {
        components: { Children }
        data() {
            return {
                dataList: [
                    {
                        id: 11,
                        name: 'zhang',
                        age: 18
                    },
                    {
                        id: 12,
                        name: 'zhangaaa',
                        age: 19
                    }
                ]
            }
        }
    }
</script>

子组件

// 子组件用props接收
<template>
    <div class="wrapper">
        <div v-for="item in dataList" :key="item.id">
			<span>姓名：{{ item.name }}</span>
            <span>年龄：{{ item.age }}</span>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            dataList: {
                type: Array,
                required: true
            }
        }
    }
</script>

2、子传父

（1）$refs

父组件

// 父组件里面使用子组件children
<template>
    <div class="wrapper" @click="changeChild">
        // 子组件
    	<Children ref="child">
    </div>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            changeChild() {
                // 改变子组件里msg的值
                this.$refs.child.msg = '我更新了子组件'
                // 调用子组件里面的init方法
                this.$refs.child.init()
            }
        }
    }
</script>

子组件

// 子组件用props接收
<template>
    <div class="wrapper">
        <span>message: {{ msg }}</span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: '我是子组件'
            }
        },
        methods: {
            init() {
                // methods...
                console.log('init')
            }
        }
    }
</script>

（2）$emit

父组件用@methods接收

// 父组件里面使用子组件children
<template>
    <div class="wrapper">
        // 子组件
    	<Children :data-list="dataList" @click-change="changeIt">
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dataList: [
                    {
                        id: 11,
                        name: 'zhang',
                        age: 18
                    },
                    {
                        id: 12,
                        name: 'zhangaaa',
                        age: 19
                    }
                ]
            }
        },
        methods: {
            // 接收子组件传来的值val
            changeIt(val) {
                console.log(val)
            }
        }
    }
</script>

子组件用$emit传值

// 子组件用props接收
<template>
    <div class="wrapper">
        <div v-for="item in dataList" :key="item.id" @click="editIt(item)">
			<span>姓名：{{ item.name }}</span>
            <span>年龄：{{ item.age }}</span>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            dataList: {
                type: Array,
                required: true
            }
        },
        editIt(item) {
            // 传给父组件
            this.$emit('click-change', item)
        }
    }
</script>

（3）$parent
子组件无法直接修改父组件，但是可以调用父组件的方法，让父组件去修改

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            changeParent() {
                // 改变父组件里msg的值
                this.$parent.msg = '我更新了父组件'
                // 调用父组件里面的init方法
                this.$parent.init()
            }
        }
    }
</script>

3、兄弟传值

（1）vuex

具体可参考 之前那篇 vuex存取数据

（2）bus总线传值

…待补充