vue2.0数据传递方法与小技巧

写这篇文章的时候已经写了2个vue全家桶项目了,来分享下我从中遇到数据传递的困难和临时解决问题吧!
如下代码我都采用组件化开发过程进行讲解

1.父级传递给子级(prop)

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>

2.子级传递给父级(emit on)搭配使用

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)=>{})便可

3.兄弟组件传值

刚开始遇到这个问题的时候,我还不知道有vuex的存在,结果用了个让代码比较繁琐的一个方法(项目比较大不推荐)
当建立脚手架的时候会有个App.vue入口组件,组件里会有个<router-view>标签。
这个标签你能够看成是路由文件的父级,由于前面介绍了prop能够父级传给子级数据,那就能依靠这个方法在<router-view>标签上绑定数据,而后使用prop一步一步传下去了。

4.Vuex简单介绍

项目比较大的时候及其推荐Vuex,我这边简单作下使用方法,具体看官网,写的很详细Vuex。

Vuex:能够理解就是全局状态管理的一个插件,理论上全部组件都能拿到Vuex里面的数据。
State:能够理解为组件中的data,就是放数据的地方.
Mutation:能够理解为提交数据给data的方法(同步)
Action:能够理解为提交数据给Mutation而后经过Mutation再提交给data的方法(异步)
Getter:能够将data的数据进行过滤,而后组件经过获取Getter方法来获取到过滤的data