美文网首页
2018-09-25非父子组件的传值

2018-09-25非父子组件的传值

作者: 其实_dnhl | 来源:发表于2018-09-25 19:24 被阅读8次
<div id="app">
    <boy></boy>
    <girl></girl>
</div>
<script src="js/vue.js"></script>
<script>
    var kfc = new Vue();
    Vue.component("boy",{
        template:`
        <div>
            <h1>我是传出的</h1>
            <button @click="sendmsg">发送数据传</button>
        </div>
        `,
        data:function(){
            return{
                msg:"我是boy组件,要传给girl"
            }
        },
        methods:{
            sendmsg:function(ssw){
                kfc.$emit("send",this.msg)
            }
        }
    });

    Vue.component("girl",{
        template:`
            <div>
                <h1>我是接收的</h1>
                <a href="">{{mess}}</a>
            </div>
        `,
        data:function(){
            return{
                mess:""
            }
        },
        mounted:function(){
            kfc.$on("send",msg=>{
                this.mess = msg
            })
        }
    });

    new Vue({
        el:"#app"
    });
</script>

相关文章

  • vue2.0的三种常用传值方式,并且如何实现?

    vue2.0 组件传值方式有三种:父组件向子组件传值,子组件向父组件传值,非父子组件传值 : 父传子: 首先现在父...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • vue 组件之间传值方法

    1. 父组件向子组件传值 父组件: 子组件: 2. 子组件向父组件传值 子组件: 父组件: 3. 非父子之间传值 ...

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

  • vue不同组件间传值方式

    父传子子传父非父子传值 1.父组件向子组件进行传值 父组件: 子组件: 2.子组件向父组件传值 子组件: 父组件:...

  • 组件之间的传值

    组件之间的传值,包括父子组件传值,兄弟组件之间的传值,其中父子组件包括父组件向子组件传值和子组件向父组件传值,现在...

  • vue 父子组件传值 $on sync v-model

    1、正常的父子组件传值2、使用sync 实现父子组件传值3、使用v-model实现父子组件传值

  • vue初步学习---组件弹出框的实现

    当你使用终端命令建立vue项目时候,我们可能需要父组件向孙组件传值,或者非父子组件传值,或子组件向父组件传值的时候...

  • Vue组件通讯的实现方法有哪些?

    有三种,分别是1、父组件向子组件传值;2、子组件向父组件传值;3、非父子组件传值; 父向子传值:父组件定义一个属性...

网友评论

      本文标题:2018-09-25非父子组件的传值

      本文链接:https://www.haomeiwen.com/subject/oraloftx.html