首页 > 代码库 > vue中怎么实现组件通信--自我总结
vue中怎么实现组件通信--自我总结
1.父组件到子组件
父组件 -- > 子组件,使用的props属性传递机制。
-
在父组件调用子组件时,设置属性
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中怎么实现组件通信--自我总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。