非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)

使用总线机制(bus)实现非父子组件间传值 

 在两个child组件间传值,实现点击一个child组件,另一个组件变成与此相同的值

<div id="root">
    <child content="the first value"></child>
    <child content="the second value"></child>
</div>
<script>
    Vue.prototype.bus=new Vue()
    Vue.component('child',{//定义一个全局组件
        props:{
            content: String
        },
        data: function(){
            return{
                selfContent:this.content
            }
        },
        template: '<div @click="handleClick">{{selfContent}}</div>',
        methods:{
            handleClick: function () {
                //alert(this.selfContent)
                this.bus.$emit('change',this.selfContent)
            }
        },
​​​​​​​       //在钩子函数中监听msg事件
        mounted:function (msg) {
            var this_=this;
            this.bus.$on('change',function (msg) {
                this_.selfContent=msg
            })
        }
    })
    var vm=new Vue({
        el: "#root"
    })
</script>

(待补充)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中,父子组件可以使用 props 和 emit 两种方式。 1. props:父组件通过 props 属性向子组件递数据,子组件通过 props 来接收数据。具体而言,可以在子组件中声明 props,然后在父组件中使用 v-bind 来绑定数据。例如: ```html <!-- 父组件 --> <template> <child-component :message="parentMessage"></child-component> </template> <!-- 子组件 --> <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script> ``` 2. emit:子组件通过 emit 方法向父组件发送事件,并递数据。父组件可以通过 v-on 来监听子组件发送的事件,并接收数据。具体而言,可以在子组件中使用 $emit 方法来发送事件,然后在父组件中使用 v-on 来监听事件。例如: ```html <!-- 父组件 --> <template> <div> <child-component @my-event="handleChildEvent"></child-component> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, methods: { handleChildEvent(data) { this.message = data } } } </script> <!-- 子组件 --> <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('my-event', 'hello from child') } } } </script> ``` 以上两种方式都可以用于父子组件,具体使用哪种方式,需要根据具体场景来选择。如果是单向数据流,建议使用 props;如果是需要在子组件中触发事件,建议使用 emit。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值