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

最新推荐文章于 2024-05-17 08:00:00 发布

小星有大理想

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量824

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/hxxx1314/article/details/118862534

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

父组件通过属性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>

小星有大理想

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue父子组件通过props传递数据

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

扫一扫