【4858美高梅】0组件通讯,怎么着把子组件的数码传给父组件

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

$emit 子组件触发父组件的秘诀:

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

本文重要对vue 用$emit 与 $on
来进展零部件之间的多寡传输.

不久前学了Vue2.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:没看父组件传给子组件的先看看去。

根本的传输形式有二种:

父组件传数据给子组件

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

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

如此就能够子组件’child’就能吸收接纳到父组件(也正是挂载在
app上的)的数据。

至于props的写法有各个,具体请看法定文书档案

 

1、代码

一.父零件到子组件通讯

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

三.弟兄组件之间的通讯

 

【4858美高梅】0组件通讯,怎么着把子组件的数码传给父组件。一、父组件传值给子组件

父组件给子组件传子,使用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>

 

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

行使 $emit(eventname,option)
触发事件,

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

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

 

唯独,那里有叁个主题素材,

一、毕竟是由子组件内部主动传数据给父组件,由父组件监听接收(由子组件中操作决定哪些时候传值)

贰、照旧经过父组件决定子组件哪一天传值给父组件,然后再监听接收 (由父组件中操作决定如曾几何时候传值)

二种情况都有

二.壹 :
$meit事件触发,通过子组件内部的事件触发自定义事件$emit

2.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.兄弟组件之间的通信

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

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

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

 (四)、接收数据方,在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

4858美高梅 ,子组件与子组件通讯

只要三个零件不是父子组件那么怎么样通讯呢?
此刻能够由此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(事件名,参数) 触发事件

二、子组件需求某种形式来触发自定义事件

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

3、效果

4858美高梅 1

总结

上述所述是小编给大家介绍的vue2.0
如何把子组件的数目传给父组件(推荐),希望对我们享有帮助,假设我们有其余疑问请给笔者留言,小编会及时还原大家的。在此也卓殊多谢大家对剧本之家网址的支撑!

您只怕感兴趣的稿子:

  • VUEJS 二.0
    子组件访问/调用父组件的实例
  • vue 使用ref
    让父组件调用子组件的方式
  • Vuejs 贰.0
    子组件访问/调用父组件的法子(示例代码)
  • vue父组件点击触发子组件事件的实例疏解
  • vue里面父组件修改子组件样式的章程
  • vue二.0
    父组件给子组件传递数据的艺术
  • vue父组件向子组件(props)传递数据的格局
  • vue父组件向子组件动态传值的三种办法
  • vue.js中父组件调用子组件的内部方法言传身教
  • vue父组件中获取子组件中的数据(实例讲明)
  • Vue2.0父组件与子组件之间的轩然大波发射与接受实例代码
  • vue父组件通过props怎么着向子组件传递方式详解
  • vue二.x
    父组件监听子组件事件并传播音讯的秘诀
  • Vue中父组件向子组件通讯的措施
  • 详解vue二父组件传递props异步数据到子组件的主题材料
  • vue子组件使用自定义事件向父组件传递数据
  • vuejs二.0子组件改动父组件的数目实例
  • 图像和文字介绍Vue父组件向子组件传值

发表评论

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

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