组件间的相互传递

最新推荐文章于 2024-01-28 21:17:33 发布

一个想走出去的码农

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量209

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51811318/article/details/116406993

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

父组件向子组件传值

1.基本用法

父向子传递

2.父组件向子组件传递

2.1动态传递

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item :title='title1'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            // 来自父组件的属性
            props: ['title'],
            data: function () {
                return {
                    msg: '子组件的数据'
                }
            },
            template: `
            <div>
              {{msg+'-------'+title}}
            <div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件的数据',
                title1: '111'
            }
        })
    </script>

2.2静态传递

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item title='来自父组件的数据'></menu-item>
        <!-- <menu-item :title='title1'></menu-item> -->
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            // 来自父组件的属性
            props: ['title'],
            data: function () {
                return {
                    msg: '子组件的数据'
                }
            },
            template: `
            <div>
              {{msg+'-------'+title}}
            <div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件的数据',
                // title1: '来自父组件的数据'
            }
        })
    </script>
</body>

2.3动静结合传递

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <!-- <menu-item title='来自父组件的数据'></menu-item> -->
        <menu-item :title='title1' content='hello'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            // 来自父组件的属性
            props: ['title', 'content'],
            data: function () {
                return {
                    msg: '子组件的数据'
                }
            },
            template: `
            <div>
              {{msg+'-------'+title+'-----'+content}}
            <div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件的数据',
                title1: '来自父组件的数据'
            }
        })
    </script>
</body>

2.4props属性命名规则

驼峰命名法

2.4.1 规则1

<body>
    <div id="app">
        <div>{{msg}}</div>
        <menu-item :menu-title='ptitle'></menu-item>

        <!-- <menu-item></menu-item> -->
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['menu-title'],
            // 这里用括号的括起来的不能用- 它代表属性
            template: `<div>{{menuTitle}}</div>`
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>
</body>

2.4.2 规则2

<body>
    <div id="app">
        <div>{{msg}}</div>
        //必须得绑定在模板上
        <menu-item :menu-title='ptitle'></menu-item>

        <!-- <menu-item></menu-item> -->
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('test-item', {
            props: ['testTitle'],
            template: `<div>{{testTitle}}</div>`
        });
        Vue.component('menu-item', {
            props: ['menu-title'],
            // 这里用括号的括起来的不能用- 它代表属性   但是在字符串形式的模板中没有此限制
            // 两者的关系从模板中判断   menu-item是父 test-item是子
            template: `<div>{{menuTitle}}<test-item testTitle='hello'></test-item></div>`
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>
</body>

2.5 props属性值类型

props的属性值支持不同类型的数据
它是单向数据流只允许父传子
支持的数据有
字符串：String
数值：Number
布尔值：Boolean
数组：Array
对象：Object
实例代码如下：

<body>
    <div id="app">
        <div></div>
        <menu-item :string='string' num='123456' :bloon='bloon' :arr='arr' :obj='obj'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 定义模板
        Vue.component('menu-item', {
            props: ['string', 'num', 'bloon', 'arr', 'obj'],
            data: function () {
                return {
                }
            },
            template: `
                <div>
                    {{string+'----'+num+'----'+bloon+'----'}}
                    <ul>
                    <li :key='index' v-for='(item,index) in arr '>{{item}}</li> 
                    </ul>
                    <span> {{obj.one}}</span>
                    <span> {{obj.two}} </span>
                </div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                string: '字符串',
                arr: ['数', '组'],
                bloon: true,
                obj: {
                    one: '1',
                    two: '2'
                }
            },
        })
    </script>
</body>

子组件向父组件传值

1.基本用法

子传父

1.1子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text")'></button>

1.2父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize+=0.1'></menu-item>

1.3 案例需求：通过子组件按钮点击之后，通知父组件，文字变大

<body>
    <div id="app">
        <div :style='{fontSize:fontsize+"px"}'>{{msg}}</div>
        <menu-item @enlarge-text='handle'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            data: function () {
                return {
                }
            },
            template: `
            <div>
            <button @click='$emit("enlarge-text")'>按钮</button>    
            </div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件的内容',
                fontsize: 10
            },
            methods: {
                handle: function () {
                    this.fontsize += 5
                }
            }
        })
    </script>
</body>

2.携带参数

2.1子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text",0.1)'></button>

2.2父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize+=$event'></menu-item>

<body>
    <div id="app">
        <div :style='{fontSize:fontsize+"px"}'>{{msg}}</div>
        <!-- $event获取到这个值 -->
        <menu-item @enlarge-text='handle($event)'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            data: function () {
                return {
                }
            },
            template: `
            <div>
            <button @click='$emit("enlarge-text",5)'>按钮</button>    
            </div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件的内容',
                fontsize: 10
            },
            methods: {
                // 用参数来接收
                handle: function (val) {
                    // val是子组件传递过来的值
                    this.fontsize += val
                }
            }
        })
    </script>
</body>

兄弟组件之间数据交互

1.基本用法

1.1案例需求：点兄弟的按钮让自己的数值变化点销毁事件两个兄弟按钮不起作用

<body>
    <div id="app">
        <div>{{msg}}</div>
        <button @click='handle'>销毁事件</button>

        <menu-tom></menu-tom>
        <menu-jerry></menu-jerry>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var eventHub = new Vue();

        Vue.component('menu-tom', {
            data: function () {
                return {
                    num1: 0
                }
            },
            template:
                `
            <div>
                <div>TOM:{{num1}}</div>
                <button @click='handle'>点击</button>
            </div>
            `
            ,
            methods: {
                handle: function () {
                    eventHub.$emit('menu-jerry', 2)
                }
            },
            // 监听   
            mounted: function () {
                // 监听事件  接收到对方传过来的数据
                eventHub.$on('menu-tom', (val) => {//事件是让num值变化
                    this.num1 += val
                });
            }

        });
        Vue.component('menu-jerry', {
            data: function () {
                return {
                    num2: 0
                }
            },
            template:
                `
            <div>
                <div>jerry:{{num2}}</div>
                <button @click='handle'>点击</button>
            </div>
            `
            ,
            methods: {
                // 出发的是对方的事件
                handle: function () {
                    eventHub.$emit('menu-tom', 3)
                }
            },
            mounted: function () {
                // 监听事件
                eventHub.$on('menu-jerry', (val) => {//事件是让num值变化
                    this.num2 += val;
                });
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件'
            },
            methods: {
                handle: function () {
                    // 销毁事件
                    eventHub.$off('menu-jerry'),
                        eventHub.$off('menu-tom')
                }
            }
        })
    </script>
</body>

一个想走出去的码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件间的相互传递

父组件向子组件传值1.基本用法2.父组件向子组件传递2.1动态传递<body> <div id="app"> <div>{{pmsg}}</div> <menu-item :title='title1'></menu-item> </div> <script src="js/vue.js"></script> <scrip
复制链接

扫一扫