Vue的父传子与子传父

子传父

要点:通过自定义事件触发父级方法来进行修改父级数据

总结: 1.在父组件中定义修改数据方法 2.在模板中绑定触发自定义事件的事件 3.调用子组件的时候,使用自定义事件绑定父组件方法

知识点:this.$emit(“自定义事件名”,自定义事件绑定的事件函数的参数)

步骤:

1.在父组件中定义一个修改数据的方法

new Vue({
el:"#app",
data:{
fatherNum:20
},
components:{
child
},
// 定义修改数据的方法
methods:{
chanFatherNum(val){
this.fatherNum+=val
}
}
})

 

2.在父组件中,通过自定义事件,绑定事件函数的方式,接收这个函数

<div id='app'>
   <p>父组件中的数字是: {{fatherNum}}</p>
   <!-- 2.在父组件中,通过自定义事件,绑定事件函数的方式,接收这个函数 -->
   <!--!!注意!! @fn !! -->
   <child :num="fatherNum" @fn="chanFatherNum"></child>
</div>  
// 单向数据流(父组件不允许子组件直接修改父组件的数据)
let child={
template:'#tmpl',
props:["num"],   //使用props来传递数据 num
data(){
return{
step:20    //写下定义的需要为的数据
}},

修改到父组件的时候有专门的方式 — 子传父 this.num这种方式只用于获取数值而无法产生改变

 

3.在需要修改到父组件数据的地方,触发这个自定义事件(fn一旦触发,chanFatherNum就会执行)

子级用this.$emit调用父级的方法

//在子级中声明方法
methods:{
hdClick(){
this.$emit("fn",this.step)
}
}}

$emit() 专门用来触发自定义事件

this.$emit(“事件名”,事件函数的参数)

子组件中

<template id="tmpl">
   <div>
       <p>{{num}}</p>
       <button @click="hdClick">按钮</button>
   </div>
</template>

 

 

父传子

1.在父组件内部,声明这个标签属性,用来接收父组件的数据

let child = {
template:"#tmpl", //指定模板
props:["num"] // 1. 声明标签属性
}

new VUe({
el:"#app",
data:{
fatherNum:20 //父组件的数据
},
components:{
child  //注册子组件
}
})

2在父组件调用子组件的时候,用标签属性 接收 父组件的数据

<div id='app'>
   <child :num="fatherNum"></child>
</div>  

3.在子组件模板中通过标签属性调用数据

// 子组件中准备模板
<template id="tmpl">
   <div>
       <p>{{num}}</p>
   </div>
</template>
 

原文地址:http://www.cnblogs.com/Dollom/p/16823192.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性