我的组件传参

最新推荐文章于 2022-07-27 19:21:47 发布

谢去非

最新推荐文章于 2022-07-27 19:21:47 发布

阅读量734

点赞数

分类专栏： vue基础文章标签： vue 组件化

本文链接：https://blog.csdn.net/ryyzxf/article/details/109412598

版权

vue基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

我的组件传参

父传子
子传父
兄弟传

父传子

1.子组件在组件内部，使用自定义名称的props属性，来接收父组件传来的属性值。
2.把该属性添加在自己的template模板当中。
3.在父组件关联子组件的地方，给子组件挂载子组件自定义的属性，并将父属性的值绑定到该属性上。

<body>
    <div id="app">
        <parent></parent>
        <son></son>
    </div>
    <script src='./js/vue.js'></script>
    <script>
        // 子组件
        const Son = {
                props: ['pword'],
                data() {
                    return {
                        msg: ''
                    }
                },
                template: `<div >我是儿子,我听爸爸的话:{{pword}}</div>`
            }
            // 父组件
        const Parent = {
            data() {
                return {
                    msg: '好好学习'
                }
            },
            template: `<div>我是爸爸
                            <son :pword='msg'></son>
                        </div>`,
            components: {
                Son,
            }
        }
        const vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                Parent,
            }
        })
    </script>
</body>

在这里插入图片描述

子传父

1.不能直接修改props属性的值，会报错。
2.子组件一般通过事件触发的形式向父组件传参，在子组件中挂载事件触发，为该事件的触发传入自定义名称的事件触发方法，方法内部，使用this.$emit()方法，传入两个参数，一个是要挂载到父组件的自定义事件触发名称，一个是要传的值。
3.在父组件关联子组件的地方，挂载子组件自定义的触发事件，并传入方法，方法以形参接收子组件传来的参数信息。

<body>
    <div id="app">
        <parent></parent>
        <son></son>
    </div>
    <script src='./js/vue.js'></script>
    <script>
        // 子组件
        const Son = {
                data() {
                    return {
                        msg: '给我钱花 '
                    }
                },
                template: `<div>我是儿子
                                <button @click='callP'>打电话</button>
                           </div>`,
                methods: {
                    callP() {
                        this.$emit('giveMony', this.msg);
                    }
                }

            }
            // 父组件
        const Parent = {
            data() {
                return {
                    msg: ''
                }
            },
            template: `<div>我是爸爸,我儿子打电话说： {{msg}}
                            <son @giveMony='ok'></son>
                        </div>`,
            components: {
                Son,
            },
            methods: {
                ok(val) {
                    this.msg += val;
                }
            }
        }
        const vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                Parent,
            }
        })
    </script>
</body>

在这里插入图片描述

兄弟传

1.需要一个事件中心hub来监听和触发兄弟间的事件。
2.例如在组件A中有一个点击事件，点击事件绑定一个触发方法，方法内部使用hub.$emit()方法，来触发当前的事件，也就是这个点击事件；在组件B的mounted()函数里，使用hub.$on()方法来监听对方的触发的事件，对传来的参数进行处理。

<body>
    <div id="app">
        父组件
        <Jerry></Jerry>
        <Tom></Tom>
    </div>
    <script src='./js/vue.js'></script>
    <script>
        const Jerry = {
            data() {
                return {
                    JerryNum: 0
                }
            },
            template: `<div>我是Jerry  {{JerryNum}}
                            <button @click='TomNumAdd'>点我增加Tom+2</button>
                       </div>`,
            methods: {
                TomNumAdd() {
                    hub.$emit('TomNumAdd2', 2);
                }
            },
            mounted() {
                hub.$on('JerryNumAdd1', (val) => {
                    this.JerryNum += val;
                })
            }
        }
        const hub = new Vue();
        const Tom = {
            data() {
                return {
                    TomNum: 0
                }
            },
            template: `<div class='content'>我是Tom  {{TomNum}}
                             <button @click='JerryNumAdd'>点我增加Jerry+1</button>
                       </div>`,
            methods: {
                JerryNumAdd() {
                    hub.$emit('JerryNumAdd1', 1);
                }
            },
            mounted() {
                hub.$on('TomNumAdd2', (val) => {
                    this.TomNum += val;
                })
            }
        }
        const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            components: {
                Jerry,
                Tom,
            }
        })
    </script>
</body>

在这里插入图片描述

谢去非

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的组件传参

我的组件传参父传子子传父兄弟传父传子1.子组件在组件内部，使用自定义名称的props属性，来接收父组件传来的属性值。2.把该属性添加在自己的template模板当中。3.在父组件关联子组件的地方，给子组件挂载子组件自定义的属性，并将父属性的值绑定到该属性上。<body> <div id="app"> <parent></parent> <son></son> </div&g
复制链接

扫一扫