第八篇：Vue组件传参

组件传参

父传子

1）在子组件内部通过props设置组件的自定义属性

props: ['abc', 'goods']

2）在父组件渲染子组件是对自定义属性赋值即可

<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>

示例代码：

子组件示例代码

<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
 
<script>
    export default {
        name: "GoodsBox",
        // 在组件内部通过props定义组件的自定义属性
        props: ['abc', 'goods'],
    }
</script>
 
<style scoped>
    .goods-box {
         260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
         260px;
        height: 260px;
    }
</style>

父组件示例代码

<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子组件是对自定义属性赋值即可 -->
            <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
 
    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小猫',
        },
        {
            img: require('@/assets/img/002.jpg'),
            title: '小猫儿',
        },
        {
            img: require('@/assets/img/003.jpg'),
            title: '小狗',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗儿',
        },
    ];
 
    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

子传父

前提：子组件是被父组件渲染的，所以子组件渲染要晚于父组件。

1）在这个前提下，子组件一定要满足一个条件，才能对父组件进行传参（某个时间节点 === 某个被激活的方法）

eg: i）子组件刚刚加载成功，给父组件传参 ii）子组件某一个按钮被点击的时刻，给父组件传参 iii）子组件要被销毁了，给父组件传参

2）在子组件满足条件激活子组件的方法中，对父组件发生一个通知，并将数据携带处理（自定义组件事件）

<div class="goods-box" @click="boxClick"></div>
methods: {
    boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
}
 
<!--例如此处，子组件被点击后，对父组件发送通知，receiveData是自定义的事件名字，后面的是传送的数据-->

3）在父组件渲染子组件时，为自定义事件绑定方法

<GoodsBox @receiveData="recFn"/>

4）在父组件实现绑定方法时，就可以拿到子组件传参的内容（接收到了通知并在父组件中响应）

recFn(title, data2, data3) {
    console.log('接收到了' + title);
}

组件标签不能绑定系统定义的事件，没有意义，子组件的事件都是在自己内部完成

示例代码：

子组件示例代码

<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
 
<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父级 - 自定义组件的事件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>

父组件示例代码

<template>
    <div class="goods">
        <div class="main">
            <!-- 实现自定义事件，接收子组件通知的参数 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪个',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>