组件通讯

最新推荐文章于 2022-06-27 14:22:43 发布

歌谣

最新推荐文章于 2022-06-27 14:22:43 发布

阅读量231

点赞数

文章标签： js vue 小程序

本文链接：https://blog.csdn.net/weixin_49920110/article/details/117047615

版权

组件通讯

组件通讯主要分为三种：子传父，父传子，兄弟通讯

父传子

父组件是通过props属性给子组件通信
props可以传字符串，对象，数组
代码如下

<template>
  <div class="hello">
    <child :inputValue = 'value'></child>
  </div>
</template>
<script>
import child from './child'
export default {
  data () {
    return {
      value:'我是父组件的value'
    }
  },
  components:{child}
}
</script>

子组件

    <template>
       <div>
          <span>{{inputValue}}</span>
       </div>
    </template>
    <script>
    export default {
       props:{
           inputValue:String
       }
       }

子传父

vue子传父使用$emit传值

代码如下

子组件

<template>
    <div>
        <button @click="toParent">点击传到父级</button>
    </div>
</template>
<script>
export default {
    name: 'child',
    methods: {
        toParent () {
            this.$emit('fromChild', 'child')
        }
    }
}
</script>

父组件

<template>
    <div>
        <p>子级传过来的值：{{childVal}}</p>
        <child @fromChild="getChild"></child>
    </div>
</template>
<script>
import child from "@/components/child";
 
export default {
    name: 'parent',
    data () {
        return {
            childVal: ''
        }
    },
    components: {
        child
    },
    methods: {
        getChild (v) {
            this.childVal = v;
        }
    }
}
</script>

兄弟组件通讯

 vue兄弟组件之间的传参是需要，建立一个公共的eventBus，然后兄弟之间以这个为桥梁实现通信
 用$bus.$on接收数据
   $bus.$emit发送数据
   $bus.$off取消监听数据
 具体代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>兄弟组件之间的传参</title>
</head>

<body>
    <div id="app">
        <tom-vue></tom-vue>
        <jerry-vue></jerry-vue>
        <button @click="handle">销毁事件</button>
    </div>
</body>
<script>
    var  hub = new Vue()
    // 兄弟组件A
    var tomVue = {
        data(){
            return {
                num:1
            }
        },
        template:'<button @click ="handle">tom点击了{{num}}次</button>',
        created(){
            // 监听组件的数据
            hub.$on('tom-event',(val) => {
                    this.num += val
                })
        },
        methods:{
            // 触发兄弟组件的事件和给兄弟组件的值
            handle () {
                hub.$emit('jerry-event', 3)
            }
        }
    }
    // 兄弟组件B
    var jerryVue = {
        data(){
            return {
                num:1
            }
        },
        template:'<button @click ="handle">jerry点击了{{num}}次</button>',
        created(){
            // 监听组件的数据
            hub.$on('jerry-event',(val) => {
                    this.num += val
                })
        },
        methods:{
            // 触发兄弟组件的事件和给兄弟组件的值
            handle () {
                hub.$emit('tom-event', 2)
            }
        }
    }
    var vue = new Vue({
        el: '#app',
        data() {
            return {
            }
        },
        components:{
            tomVue,
            jerryVue
        },
        methods:{
            handle(){
                hub.$off('tom-event')
                hub.$off('jerry-event')
            }
        }
    })
</script>

</html>

歌谣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件通讯

组件通讯组件通讯子传父组件通讯组件通讯主要分为三种：子传父，父传子，兄弟通讯子传父父组件是通过props属性给子组件通信代码如下<template> <div class="hello"> <child :inputValue = 'value'></child> </div></template><script>import child from './child'export def
复制链接

扫一扫