Vue父子组件通过props传递数据

80 阅读 0 评论 53 点赞

我是靠谱客的博主勤恳抽屉，最近开发中收集的这篇文章主要介绍Vue父子组件通过props传递数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

父组件通过属性props向下传递数据给子组件，子组件通过事件处理方法处理之后给父组件发送消息。比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。而当子组件内部发生了什么事情的时候，就通过自定义事件处理方法来把这个事情涉及到的数据暴露出来，供父组件处理。例子如下：父组件把brand数据通过props传递给子组件的brand；
子组件内部得到brand的值，就遍历content数组查找相关手机品牌，如果found不为false则把数据赋值给show；当子组件内部产生数据操作时，就利用watch监听name变化，把一些数据发送出去。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Document</title>
</head>

<body>
    <!--父组件-->
    <div id="app">
        <my-parent></my-parent>
    </div>
    <!--父组件模板-->
    <template id="parent">
        <div >
            <h3>手机信息搜索</h3>
            手机品牌：<input type="text" v-model="brand">
            <my-child v-bind:name="brand"></my-child>
        </div>
    </template>
    <template id="child">
        <ul>
            <li>
                手机品牌：{{show.brand}}
            </li>
            <li>手机型号：{{show.type}}</li>
            <li>手机价格:{{show.price}}</li>
        </ul>
    </template>
    <script>
        Vue.component('my-parent', {
            template: '#parent',
            data() {
                return {
                    brand: '',
                };
            },
        })
        Vue.component('my-child', {
            template: '#child',
            data() {
                return {
                    content: [{
                        brand: '华为',
                        type: 'Mate30',
                        price: 3999
                    }, {
                        brand: '一加',
                        type: 'OnePlus9',
                        price: 3599
                    }, {
                        brand: '苹果',
                        type: 'iPhone12',
                        price: 5999
                    }, {
                        brand: 'vivo',
                        type: 'X7',
                        price: 3999
                    }, {
                        brand: 'oppo',
                        type: 'Reno',
                        price: 2599
                    }, {
                        brand: '小米',
                        type: 'Mi10s',
                        price: 4999
                    }],
                    show: {
                        brand: '',
                        type: '',
                        price: ''
                    }
                };
            },
             <!--使用watch监听name变化-->
            props: ['name'],
            watch: {
                name() {
                    if (this.$props.name) {
                        var found = false
                        this.content.forEach((value, index) => {
                            if (value.brand === this.$props.name) {
                                found = value
                            }
                        })
                        this.show = found ? found : {
                            brand: '',
                            type: '',
                            price: ''
                        }
                    } else {
                        return
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>
</body>

</html>