2018-09-23非父子之间的传值

生命周期:

周期图表

download.png

reated(创建后),

beforeMount(载入前),

mounted(载入后),

beforeUpdate(更新前),

updated(更新后),

beforeDestroy(销毁前),

destroyed(销毁后)

vue生命周期定义:

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

二非父子组件传值

(1):新建一个空的root组件:let Event=new Vue();
(2):发送数据的组件:Event.emit('a-fnName',data) 写在组件的methods里 (3):接收数据的组件:Event.on('a-fnName',(data)=>{}),注意函数格式必须写为箭头函数,不然this指向不是当前组件

两个独立的组件不能进行传输,需要借助第三方量;
在组件模板中不能同时存在两个以上的兄弟元素;
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-father></my-father>
            <my-sun></my-sun>
        </div>
        <script>
            var bus = new Vue()
            Vue.component("my-father",{
                template:`
                <button @click="send">发送</button>

                `,
                data:function(){
                    return{
                         list:"hello vue"
                    }

                },
                methods:{
                    send:function(){
                        bus.$emit("head",this.list)
                    }
                }
            })

            Vue.component("my-sun",{
                template:`
                <div>
                <h1>{{mag}}</h1>
                <h1>{{leta}}</h1>
                </div>
                `,
                data:function(){
                    return{
                        mag:"",
                        leta:"组件B"
                    }
                },
                mounted:function(){
                    bus.$on("head",list=>{
                        this.mag=list
                    })
                }
            })
            new Vue({
                el:"#app",
            })
        </script>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 生命周期:每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ①生命周期列表: 它...
    Rascar阅读 1,661评论 0 0
  • 同级传值——非父子关系,借助第三方量 例子: 父子组件通信例子: 生命周期:Vvue-js-的生命周期_03.gi...
    有你相伴一生阅读 2,578评论 0 0
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,327评论 1 52
  • Swift3.0 - 真的很简单Swift3.0 - 数据类型Swift3.0 - ArraySwift3.0 -...
    酷走天涯阅读 5,982评论 2 4
  • StackOverflowError原因  Java 里的 StackOverflowError。抛出这个错误表明...
    SunnyMore阅读 14,467评论 0 4

友情链接更多精彩内容