首页 > 代码库 > vue中怎么实现组件通信--自我总结

vue中怎么实现组件通信--自我总结

1.父组件到子组件

父组件 -- > 子组件,使用的props属性传递机制。

  1. 在父组件调用子组件时,设置属性

Vue.component(‘child‘, {
// 声明 props
props: [‘message‘],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: ‘<span>{{ message }}</span>‘
})
设置message属性的值为hello
<child message="hello!"></child>
结果为 hello!

  2. 在子组件中,需要定义属性

在子组件的定义中,需要使用props选项,来设置可以从父组件中传递过来的属性。

components:{
  ‘my-header‘:{
    template:"#t1",
    props:[‘info‘]
  }
}

3.在子组件中,直接使用

<template id="t1">
        <div>
            <h2>这是子组件</h2>
            <p>{{info}}</p>
        </div>
    </template>

 

2.子组件到父组件

要实现子组件到父组件之间的通信 ----- 事件机制

分两步:1.在子组件中,需要发射事件,使用$emit实现。2.在父组件中,需要注册事件,使用$on 实现

第一步,在子组件中发射事件

 

//注册keyup事件
<input type="text" placeholder="输入用户名" v-model="username" @keyup="send(username)">
//在子组件中定义send方法
components : {
"my-form" : { template : "#t1", data : function(){ return { username : "" } }, methods : { send : function(msg){ //此时,子组件应该向外发生一个事件 this.$emit(‘transfer‘,msg); } } } }

第二步,在父组件注册事件

<h2>父组件</h2>
<p>来自子组件的输入数据:{{msg}}</p>
<hr>
<my-form @transfer="getUsername"></my-form>

//在父组件中,来定义整个getUsername方法,
methods : {
                getUsername : function(e){
                    // alert(‘ok‘);
                    // console.log(e);
                    this.msg = e;
                }
            },

然后就可以在父组件中使用{{msg}}

 

vue中怎么实现组件通信--自我总结