vue 组件通信及vue-bus

最新推荐文章于 2022-06-16 16:09:56 发布

JQ...

最新推荐文章于 2022-06-16 16:09:56 发布

阅读量153

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42201272/article/details/105450178

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

vue

1.父向子传值


<body>
    <div id="app">
        <menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='arr'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['pstr', 'pnum', 'pboo', 'parr'],
            template: `
            <div>
                <div>{{pstr}}</div>
                <div>{{pnum+12}}</div>
                <div>{{typeof pboo}}</div>
                <ul>
                <li v-for="(item,index) in parr" :key='index'>{{item}}</li>
                </ul>
                <button @click='parr.push("lemon")'></button>
                <div>{{parr}}</div>
            </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pstr: '字符串',
                arr: ['apple', 'banana', 'orange']
            }
        })
    </script>

在子组件定义属性名及属性值子组件内部通过props来接收父组件传递过来的值,
注意：定义组件的时候加’：‘和不加’：‘是有区别的加了’：'相当于后面的值是一个变量（里面的变量不加引号）如果不加‘：’相当于传递了一个字符串

2.子向父传值

	<div id="app">
      <div :style="{fontSize:fontSize+'px'}">{{msg}}</div>

      <menu-item @add-size="handle()"></menu-item>
    </div>
    <script>
      Vue.component('menu-item', {
        template: `
            <button @click='$emit("add-size")'>增大字体</button>
            `
      })

      var vm = new Vue({
        el: '#app',
        data: {
          msg: '父级内容',
          fontSize: 10
        },
        methods: {
          handle: function() {
            this.fontSize += 5
          }
        }
      })
    </script>

子向父传值，子组件内部通过点击事件调用$ emit()方法触发‘add-size‘ 事件，父组件通过v-on监听add-size事件，当事件被触发时，调用父组件的回调函数
点击->触发事件->父组件监听并调用回调
如果子组件要传递参数，可以再$emit 的第二个参数进行传递，父组件可以handle( $event) 通过 $event接受子组件传递来的参数

3.兄弟之间通信（事件总线）



<body>
    <div id="app">
        <brother-one></brother-one>

        <sister-one></sister-one>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var hub = new Vue()
        Vue.component('brotherOne', {
            data: function() {
                return {
                    msg: '哥哥的值'
                }
            },
            methods: {
                //设置传递名称和参数
                handle() {
                    hub.$emit('ge', 5)
                },
                getSisterData(val) {
                    this.msg += val
                }
            },
            mounted: function() {
                hub.$on('jie', this.getSisterData)
            },
            //点击按钮触发handle函数
            template: `<button @click="handle()">
               {{msg}}
            </button>`
        })
        Vue.component('sisterOne', {
            data: function() {
                return {
                    msg: '姐姐的值'
                }
            },
            methods: {
                handle() {
                    hub.$emit('jie', 5)
                },
                //接收到兄弟传递过来的参数 并且和原来的值进行拼接
                getBrotherData(val) {
                    this.msg += val
                }
            },
            mounted: function() {
                //监听接口 观察ge的变化 并且获取ge传递过来的参数 触发函数
                hub.$on('ge', this.getBrotherData)

            },
            template: `<button @click="handle()">
                {{msg}}
            </button>`
        })
        new Vue({
            el: '#app'
        })
    </script>
</body>

4.vue-bus

1.npm i vue-bus
2.通过this. $bus.emit(‘自定义事件名称’,参数)发送数据
3.通过this. $bus.on(‘自定义事件名称(和上面的名称一样)’,(接收到的参数count)=>{console.log(接收到的参数count)})
4.this. $bus.off(‘自定义事件名称’)当组件被销毁时记得把事件解绑

JQ...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件通信及vue-bus

vue1.父向子传值<body> <div id="app"> <menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='arr'></menu-item> </div> <script src="./js/vue.js">&lt...
复制链接

扫一扫