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

2024年2月10日 89次阅读 来源: 徐鹏云

写这篇文章的时候已经写了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
    原文作者：徐鹏云
    原文地址: https://segmentfault.com/a/1190000012123109
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞