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

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

2024-09-09 20:46:34   223人阅读

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中怎么实现组件通信--自我总结


联系
我们