美文网首页
同级之间传值

同级之间传值

作者: 七缘灬 | 来源:发表于2018-09-23 19:26 被阅读0次

一.父子组件

1.父组件到子组件通讯
父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function)。Vue提倡单项数据流,因此在通常情况下都是父组件传递数据给子组件用,子组件出发父组件的事件,并传递给父组件所需的参数。

2.通过Props传递数据
父子通讯中最常见的数据传递方式就是通过props传递数据,就好像方法的传参一样,父组件调用子组件并传入数据,子组件接收到父组件传递的数据进行验证使用

3.通过$on传递父组件方法
通过on传递父组件方法是通信中常用的方法传递方式。他可以通过props传递方法达到相同效果。相比于props传递function,它更加的直观和显示的表现出了调用关系

父子组件通信例子:

<div id='app'>
       <chat></chat>
   </div>
    <script src='js/vue.js'></script>
    <script>
    Vue.component('chat',{
        template:`
           <div>
              <ul>
                 <li v-for="value in arr">{{value}}</li>
              </ul> 
              <user @send='rcvMsg' userName='jack'></user>
              <user @send='rcvMsg' userName='rose'></user>
           </div>
       `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.arr.push(txt)
            }
        }
    })  
    
    Vue.component('user',{
        props:['userName'],
        template:`
          <div>
             <label>{{userName}}</label>
             <input type='text' v-model='inputVal'>
             <button @click='sendMsg'>发送</button>
          </div>
        `,
        data:function(){
            return{
                inputVal:''
            }
        },
        methods:{
          sendMsg:function(){
              this.$emit('send',this.userName+':'+this.inputVal)
          }
        }
    }) 
    new Vue({
        el:'#app'
    })
    </script>

效果如下:


父子相传.png

二.生命周期
1.每个Vue的实例再被创建之前都要经过一系列的初始化过程,这个过程就是Vue的生命周期

2.Vue的所有钩子函数:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

生命周期例子:

<div id='app'>{{msg}}</div>
    <script src='vue/dist/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreated');
           },
           created:function(){
               alert('created')
           },
           beforeMount:function(){
                 alert('beforMount')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>

效果如下:


1.png 2.png 3.png 4.png 效果.png

相关文章

  • 同级之间传值

    一.父子组件 1.父组件到子组件通讯父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方...

  • 组件之间的传值之非父子(同级之间的传值用第三方量)

    同级之间的传值1:body部分: Document

  • 同级传值

    1、什么是同级传值? 同级传值又叫非父子传值,第三方量:var = new Vue();使用$on()事件监听。 ...

  • 2018-09-22 vue初学8.1(非父子间的传值)

    非父子间的传值也可以理解为同级之间的传值 在非父子传值中主要声明了一个:var 变量 = new Vue(); ...

  • 同级传值

    1.生命周期 2.父子通讯练习: Vue.component('chat',{ 3.同级传值: var bus =...

  • 同级传值

    同级传值——非父子关系,借助第三方量 例子: 父子组件通信例子: 生命周期:Vvue-js-的生命周期_03.gi...

  • RN --- 组件传值

    正向传值 A->B 反向传值 A -> B -> A 同级数据交换 标题栏与其所属的页面之间的交互1.通过生命周期...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • Vue同级传值

    1.同级传:非父子关系:第三方量 var bus=new Vue(); 使用 $on() 监听事件 2.生命的周期

  • 2018-09-23同级之间传值

    一:父子组件通信(对话) 屏幕展示:对话形式 生命周期 代码展示 屏幕展示:弹出多个弹出框beforeCreate...

网友评论

      本文标题:同级之间传值

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