【4858美高梅】父亲和儿子组件的方法调用,on父子组件与哥们组件的里边通讯

By admin in 4858美高梅 on 2019年5月4日

$emit 子组件触发父组件的主意:

在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App.

正文首要对vue 用$emit 与 $on
来进行零部件之间的数额传输.

多年来学了Vue贰.0,写写本人的一些总括,关于老爹和儿子组件通信的,这一点对于自身来讲,是看文书档案的时候相比较难理解的。通过互连网找质地和实施,也有几许了然。

事例使用以下代码模板

<script src="https://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<div id="app">
    <!--父组件-->
    <p>{{total}}</p>
    <child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
    <button type="button" @click="clickref">调用子组件</button>
</div>

<!--子组件-->
<template id="myChild">
    <button @click="add">{{counter}}</button>
</template>

<script>
    new Vue({
        el:'#app',
        data :{
            total: 1          
        },
        methods:{
            incrementTotal : function(){

            },
            clickref:function(){

            }
        },
        components:{
            'child' :{
                template:'#myChild',
                data : function(){
                    return{
                        counter : 0
                    }
                },
                props:['numA','numS'],
                methods:{
                    add : function(){

                    }
                }
            }
        }
    });
</script>
 1 <!-- 子组件 -->
 2 <template>
 3     <div id="child">
 4         <button @click="tryToParent">click</button>
 5     </div>
 6 </template>
 7 <script>
 8 export default {
 9     name: 'child',
10     methods:{
11         tryToParent(){
12             // 通过$emit进行触发
13             // 第一个参数为父组件监听的事件名,后续参数为父组件方法的参数
14             this.$emit("toParent","我从子组件传来")
15         }
16     }
17 }
18 </script>
19 
20 <!-- 父组件 -->
21 <template>
22     <div id="parent">
23         <!-- 监听child的toParent事件广播,用fromChild进行处理 -->
24         <child @toParent="fromChild"></child>
25     </div>
26 </template>
27 <script>
28 import child from "./child.vue"
29 export default {
30     name: 'parent',
31     components:{child},
32     methods:{
33         fromChild(msg){
34             console.log(msg);  // 点击子组件的button,这里最终打印出“我从子组件传来”
35         }
36     }
37 }
38 </script>

ps:没看父组件传给子组件的先看看去。

重中之重的传输格局有二种:

4858美高梅 ,父组件传数据给子组件

当子组件须要父组件传递的多少时,子组件要设置props,来接受父组件传递过去的值。
在此地父组件传递的是total,子组件设置props[numA,numS],接着在调用子组件的时候将父组件的数据传递过去,如下

    <child :num-a="total" num-s="total"></child>

那样就能够子组件’child’就能够吸收接纳到父组件(相当于挂载在
app上的)的数据。

关于props的写法有八种,具体请看合法文书档案

 

1、代码

一.父组件到子组件通讯

二.子组件到父组件的通讯

叁.弟兄组件之间的通讯

 

1、父组件传值给子组件

父组件给子组件传子,使用props

//父组件:parent.vue
<template>
    <div>
        <child :vals = "msg"></child>
    </div>
</template>
<script>
import child from "./child";
export default {
    data(){
        return {
            msg:"我是父组件的数据,将传给子组件"
        }
    },
    components:{
        child
    }
}
</script>


//子组件:child.vue
<template>
    <div>
        {{vals}}
    </div>
</template>
<script>
export default {
      props:{ //父组件传值 可以是一个数组,对象
        vals:{
            type:String,//类型为字符窜
          default:"123" //可以设置默认值
        }
    },
}
</script>

 

2.子组件到父组件的通讯

利用 $emit(eventname,option)
触发事件,

参数1:自定义事件名称,写法,小写或然用-连接,如event,event-name 不可能写驼峰写法(eventName)

子组件给父组件传值,能够在子组件中利用$emit触发事件的值传出去,父组件通过事件监听,获取数据

 

唯独,这里有1个难点,

【4858美高梅】父亲和儿子组件的方法调用,on父子组件与哥们组件的里边通讯。一、毕竟是由子组件内部主动传数据给父组件,由父组件监听接收(由子组件中操作决定哪些时候传值)

二、依然通过父组件决定子组件何时传值给父组件,然后再监听接收 (由父组件中操作决定如哪天候传值)

三种状态都有

二.一 :
$meit事件触发,通过子组件内部的轩然大波触发自定义事件$emit

贰.2 : $meit事件触发,
可以通过父组件操作子组件 (ref)的事件来触发 自定义事件$emit

先是种境况:

//父组件:parent.vue
<template>
    <div>
        <child  v-on:childevent='wathChildEvent'></child>
        <div>子组件的数据为:{{msg}}</div>
    </div>
</template>
<script>
import child from "./child";
export default {
    data(){
        return{
            msg:""
        }
    },
    components:{
        child
    },
    methods:{
        wathChildEvent:function(vals){//直接监听 又子组件触发的事件,参数为子组件的传来的数据
            console.log(vals);//结果:这是子组件的数据,将有子组件操作触发传给父组件
            this.msg = vlas;
        } 
    }
}
</script>

//子组件:child.vue
<template>
    <div>
       <input type="button" value="子组件触发" @click="target">
    </div>
</template>
<script>
export default {
    data(){
            return {
            texts:'这是子组件的数据,将有子组件操作触发传给父组件'
            }
    },
    methods:{
        target:function(){ //有子组件的事件触发 自定义事件childevent
            this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
        }
    },
}
</script>

其次种情景:

//父组件:parent.vue
<template>
    <div>
        <child  v-on:childevent='wathChildEvent' ref="childcomp"></child>
        <input type="button" @click="parentEnvet" value="父组件触发" />
        <div>子组件的数据为:{{msg}}</div>
    </div>
</template>
<script>
import child from "./child";
export default {
    data(){
        return{
            msg:""
        }
    },
    components:{
        child
    },
    methods:{
        wathChildEvent:function(vals){//直接监听 又子组件触发的事件,参数为子组件的传来的数据
            console.log(vals);//这是子组件的数据,将有子组件操作触发传给父组件
            this.msg = vlas;
        },
        parentEnvet:function(){
            this.$refs['childcomp'].target(); //通过refs属性获取子组件实例,又父组件操作子组件的方法触发事件$meit
        }
    }
}
</script>

//子组件:child.vue
<template>
    <div>
      <!-- dothing..... -->
    </div>
</template>
<script>
export default {
    data(){
            return {
            texts:'这是子组件的数据,将有子组件操作触发传给父组件'
            }
    },
    methods:{
        target:function(){ //又子组件的事件触发 自定义事件childevent
            this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
        }
    },
}
</script>

将两边景况相比,差距就在于$emit
自定义事件的触发是有父组件如故子组件去接触

首先种,是在子组件中定义多个click点击事件来触发自定义事件$emit,然后在父组件监听

其次种,是在父组件中率先一个click点击事件,在组件中通过refs获取实例方法来平昔触及事件,然后在父组件中监听

 

3.兄弟组件之间的通讯

 (一)、兄弟之间传递数据通过事件

 (二)、创制三个新Vue的实例,让各类兄弟共用同叁个事变机制。(关键点)

 (三)、传递数据方,通过事件触发$emit(方法名,传递的数目)。

 (4)、接收数据方,在mounted()钩子函数(挂载实例)中
触发事件$on(方法名,callback(接收数据的数据)),此时callback函数中的this已经发出了改观,能够使用箭头函数。

//建立一个空的Vue实例,将通信事件挂载在该实例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()

//兄弟组件a:childa.vue
<template>
    <div>
        A组件->{{msg}}
        <input type="button" value="把a组件数据传给b" @click ="send">
    </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
    data(){
        return {
            msg:"我是a组件的数据"
        }
    },
    methods:{
        send:function(){
            vmson.$emit("aevent",this.msg)
        }
    }
}
</script>


//兄弟组件b:childb.vue
<template>
     <div>
        b组件,a传的的数据为->{{msg}}
    </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
        return {
            msg:""
        }
    },
    mounted(){
        vmson.$on("aevent",(val)=>{//监听事件aevent,回调函数要使用箭头函数;
            console.log(val);//打印结果:我是a组件的数据
            this.msg = val;
        })
    }
}
</script>


//父组件:parent.vue
<template>
    <div>
        <childa><childa>
        <childb></childb>
    </div>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
    data(){
        return{
            msg:""
        }
    },
    components:{
        childa,
        childb
    },

}
</script>

 

到此,vue中的组件通讯传值基本能够消除了,可是对于大型复杂的品类,提出利用vuex
状态管理更适合….

引入参考学习:

          

       
 https://cn.vuejs.org/v2/api/\#vm-on

 

 完结。。。谢谢

老爹和儿子通讯-动态数据

偶然大家想完毕父组件的数据能动态的传递给子组件,使用v-model来实现

<input v-model="total">
<child :num-a="total">

<!--props的另外一种写法-->
<scirpt>
...
props: {
    numA: [String, Number]
}
</script>

$refs 父组件获取子组件实例,进而调用子组件方法可能直接修改子组件属性:

子组件 A.vue

子组件与父组件通讯

神迹大家想要实现子组件调用父组件,那要咋做吧?
我们能够通过接触事件来打招呼父组件改换多少。

父组件:

<div>
    <child @add="incrementTotal" :num-a="total"></child> //监听子组件触发的add事件,然后调用incrementTotal方法
</div>
methods: {
    incrementTotal() {
        this.total +=1
    }
}

子组件:

components:{
    'child' :{
        template:'#myChild',
        data : function(){
            return{
                counter : 0
            }
        },
        props:['numA','numS'],
        methods:{
            add : function(){
                this.counter +=1
                this.$emit('add') //子组件通过 $emit触发父组件的方法add
            }
        }
    }
}

子组件实践add方法 => 触发$emit => 触发父组件add方法 => 推行incrementTotal 方法 => 完结

 1 <!-- 子组件 -->
 2 <template>
 3     <div id="child">
 4         <div>{{message1}}</div>
 5         <div>{{message2}}</div>
 6     </div>
 7 </template>
 8 <script>
 9 export default {
10     name: 'child',
11     data(){
12         return {
13             message1:"",
14             message2:""
15         }
16     },
17     methods:{
18         fromParent(msg){
19             this.message1 = msg
20         }
21     }
22 }
23 </script>
24 
25 <!-- 父组件 -->
26 <template>
27     <div id="parent">
28         <button @click="toChild">click</button>
29         <child ref="child"></child>
30     </div>
31 </template>
32 <script>
33 import child from "./child.vue"
34 export default {
35     name: 'parent',
36     components:{child},
37     methods:{
38         toChild(){
39             /** this.$refs.child返回child组件实例 **/
40 
41             // 调用子组件的fromParent方法
42             this.$refs.child.fromParent("我从父组件传递过来")
43             // 直接修改child的data
44             this.$refs.child.message2 = "啦啦啦"
45         }
46     }
47 }
48 </script>
<template>
 <div>
 <h3>这里是子组件的内容</h3>
 <button v-on:click="spot">点一下就传</button>
 </div>
</template>

<script>
 export default {
 methods: {
  spot: function() {
  // 与父组件通信一定要加上这句话
  this.$emit("spot", '我是子组件传给父组件的内容就我。。')
  }
 }
 }
</script>

父组件调用子组件

经过给子组件设置ref,能够很有益于的拿走到子组件,然后退换子组件。

    <child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>

new Vue({
    el:'#app',
    data :{
        total: 0          
    },
    methods:{
        incrementTotal : function(){
            this.total += 1
        },
        clickref:function(){
            let childRef = this.$refs.childTest //获取子组件
                childRef.counter = 1221         //改变子组件的数据
                childRef.add(11)                //调用子组件的方法
        }
    },
    components:{
        'child' :{
            template:'#myChild',
            data : function(){
                return{
                    counter : 0
                }
            },
            props:['numA','numS'],
            methods:{
                add : function(num){
                    this.counter +=1
                    this.$emit('add')
                    console.log('接收父组件的值':+ num)
                }
            }
        }
    }
});

 

父组件 App.vue

子组件与子组件通信

假若1个零件不是父亲和儿子组件那么怎么着通讯呢?
那时候能够因而eventHub来得以达成通讯,
所谓eventHub便是开创叁个轩然大波为主,相当于中间转播站,可以用它来传递事件和抽取事件。(或许采纳vuex)
简轻易单代码如下

new Vue({
  el: '#app',
  data: {
    eventHub: new Vue()
  }
})

下一场通过this.$root.eventHub获得,上面代码简写为eventHub

组件1触发:

<div @click="eve"></div>
methods: {
    eve() {
        eventHub.$emit('change', params); //eventHub触发事件
    }
}

组件2接收:

<div></div>
created() {
    eventHub.$on('change', (params) => { //eventHub接收事件
    });
}

诸如此类就贯彻了非父亲和儿子组件之间的通讯了,原理便是把Hub当作二在那之中间转播站!

  在错综相连的vue应用中,应该用vuex的store来保管跨组件的数码沟通,再依据数量的变动触发相应的法子。

<template>
 <div id="app">
 <!-- 父组件直接用 v-on 来监听子组件触发的事件。 -->
 <!-- 需跟子组件中的$emit组合使用 -->
 <A v-on:spot="spot"/>
 </div>
</template>

<script>
import A from './components/A'
export default {
 name: 'App',
 components: {
 A
 },
 methods:{
 spot:function(data){
  console.log(data)
 }
 }
}
</script>

总结

事例代码:JSFiddle
参考:vue二.0父亲和儿子组件以及非父亲和儿子组件怎么着通讯

 

2、总结

壹、$emit很要紧,使用 $emit(事件名,参数) 触发事件

二、子组件必要某种格局来触发自定义事件

3、父组件间接用 v-on
来监听子组件触发的风波,需跟子组件中的$emit组合使用。

3、效果

4858美高梅 1

总结

上述所述是笔者给我们介绍的vue2.0
怎样把子组件的数码传给父组件(推荐),希望对我们享有援助,假若大家有任何疑问请给自家留言,小编会及时苏醒大家的。在此也格外谢谢大家对台本之家网站的支撑!

你或然感兴趣的稿子:

  • VUEJS 二.0
    子组件访问/调用父组件的实例
  • vue 使用ref
    让父组件调用子组件的方法
  • Vuejs 2.0
    子组件访问/调用父组件的点子(示例代码)
  • vue父组件点击触发子组件事件的实例讲明
  • vue里面父组件修改子组件样式的艺术
  • vue贰.0
    父组件给子组件传递数据的形式
  • vue父组件向子组件(props)传递数据的法子
  • vue父组件向子组件动态传值的二种方法
  • vue.js中父组件调用子组件的里边方法言传身教
  • vue父组件中获取子组件中的数据(实例疏解)
  • Vue二.0父组件与子组件之间的事件发射与吸收实例代码
  • vue父组件通过props如何向子组件传递形式详解
  • vue②.x
    父组件监听子组件事件并传播音讯的措施
  • Vue中父组件向子组件通讯的不2诀窍
  • 详解vue二父组件传递props异步数据到子组件的问题
  • vue子组件使用自定义事件向父组件传递数据
  • vuejs2.0子组件改换父组件的多少实例
  • 图像和文字介绍Vue父组件向子组件传值

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有