首页 > 代码库 > vue2.0父子组件通信的方法
vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听。(.sync方法已经移除。详情请点击)(dispatch-和-broadcast方法也已经废弃)
props方法传值:Props 现在只能单项传递。为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。props方法传值比较简单,缺点是属性会比较多。
(1)父传子 [ props传值 ]
<template>
<div>
<input type="text" v-model="name"/>
<myname :test-name="name"></myname>
</div>
</template>
<script type="text/javascript">
export default{
data(){
return {
name:"lihua"
}
},
components:{
myname:{
props:[‘testName‘],
template:"<h4>{{testName}}</h4>"
}
}
}
</script
这里需要注意的是testName 用的驼峰写法,如果是驼峰写法,上面的组件里面就应该是用“-”连接,即:test-name
(1)子传父 [ 使用$emit和$on进行父子组件之间的数据传输 ],也可以进行兄弟组件的传值,原理一样。
- 监听:$on(eventName)
-
触发:$emit(eventName)
<template> <div> <input type="text" v-model="name"/> <myname></myname> </div> </template> <script type="text/javascript"> import Vue from ‘vue‘
//准备一个空的实例对象,如果不定义,用this的话,this指向当前组件,达不到效果
var newOption=new Vue(); export default{ data(){ return { name:"lihua" } }, mounted(){ newOption.$on(‘test‘,mag=>{ this.name=mag }) }, components:{ myname:{ data(){ return { testName:"张三" } }, template:"<div><p>{{testName}}</p><button @click=‘childEdit‘>修改</button></div>", methods:{ childEdit:function(){ newOption.$emit(‘test‘,this.testName) } } } } } </script>
vue2.0父子组件通信的方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。