脚本宝典收集整理的这篇文章主要介绍了vue2.0数据传递方法与小技巧,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
写这篇文章的时候已经写了2个vue全家桶项目了,来分享下我从中遇到数据传递的困难和临时解决问题吧!
以下代码我都采用组件化开发过程进行讲解
father.vue
<template>
<child :message="message"></child><!--如果想从父级把数据传给child的话就得先绑定-->
</template>
<script>
import child from "child.vue"
export default {
name: 'father',
data () {
return {
message:"i am father"
}
},
components:{
child //注册子组件
}
}
</script>
chlid.vue
<template>
<div>我是子级</div>
</template>
<script>
export default {
props:['message'],
name: 'child',
data () {
return {
}
},
created(){
console.log(message);//i am father
}
}
</script>
father.vue
<template>
<child></child>
</template>
<script>
import child from "child.vue"
export default {
name: 'father',
data () {
return {
}
},
created(){
this.$on("mes", (arg) => {
console.log(arg);//i am child
})
},
components:{
child //注册子组件
}
}
</script>
chlid.vue
<template>
<div>我是子级</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
message:"i am child"
}
},
created(){
this.$emit('mes', this.message)
}
}
</script>
不过要注意子级传父级的this一定要指向同一个实例,不然会报错。如果不能指向同一个实例可进行创建一个实例bus.js。代码如下
import Vue from 'vue'
export var bus = new Vue();
然后在father.vue和child.vue引入此js,把this改成引入此js的命名就好,比如
import { bus } from "bus.js"; 改成bus.emit("mes",this.message)和 bus.on("mes",(arg)=>{})即可
刚开始遇到这个问题的时候,我还不知道有vuex的存在,结果用了个让代码比较繁琐的一个方法(项目比较大不推荐)
当创建脚手架的时候会有个App.vue入口组件,组件里会有个<router-view>标签。
这个标签你可以当作是路由文件的父级,因为前面介绍了prop可以父级传给子级数据,那就能依靠这个方法在<router-view>标签上绑定数据,然后使用prop一步一步传下去了。
项目比较大的时候及其推荐Vuex,我这边简单做下使用方法,具体看官网,写的很详细Vuex。
Vuex:可以理解就是全局状态管理的一个插件,理论上所有组件都能拿到Vuex里面的数据。
state:可以理解为组件中的data,就是放数据的地方.
Mutation:可以理解为提交数据给data的方法(同步)
Action:可以理解为提交数据给Mutation然后通过Mutation再提交给data的方法(异步)
Getter:可以将data的数据进行过滤,然后组件通过获取Getter方法来获取到过滤的data
以上是脚本宝典为你收集整理的vue2.0数据传递方法与小技巧全部内容,希望文章能够帮你解决vue2.0数据传递方法与小技巧所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。