vue父子传值的具体应用

最近我负责的项目已经迭代到第四版了，我作为一个没啥经验的小菜鸟也成长了很多。

在这一版开发开始之前，我老大就要求我在开发过程中尽量实现组件化，因此，我也遇到了很多问题，但基本都解决了，所以趁周末把这些经验总结一下。

Vue中父子组件传值的方法大体上可以分为2类：

1. 通过第三方转接，比如vuex,eventbus以及浏览器的localStorage,sessionStorage等；

2. 父子组件之间直接进行数据交换

第一种方法我用的比较多的就是vuex 以及localStorage,sessionStorage,需要注意的一点是vuex中数据改变最好使用mutation进行提交。

这次主要说说我使用第二种方法遇到的一些问题以及解决方法。

首先父子组件传值有3种写法

第一种，如果传入值是一个静态变量，可以直接在标签上写：变量名=值，这样写只能算是单向数据绑定。

父组件：

<template>
    <div>
        <child msg="一条消息"></child>
    </div>
</template>

<script>
import child from './child'
export default {
    components:{
        child
    }
}
</script>

子组件在props中进行接收

子组件：

<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  props: ["msg"]
};
</script>

第二种，也是最常用的一种，在标签上使用:或者v-bind进行数据绑定，子组件还是用props接收，如果想要更改数据，需要在父组件中定义更改数据的函数，然后用v-on或者@绑定到子组件上，子组件中使用this.$emit(方法名字符串,唯一参数)的方式调用。

这种方法最常见，也用的最多，所以就不再贴代码了。

第三种，使用v-model进行数据绑定

父组件：

<template>
  <div>
    <child msg="一条消息" v-model="number"></child>
  </div>
</template>

<script>
import child from "./child";
export default {
  components: {
    child
  },
  data() {
    return {
      number: 1,
      flag: false
    };
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{msg}}</p>
    <p>{{number}}</p>
    <button @click="change">number+1</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: "number", //变量名
    event: "aa" //自定义的事件名
  },
  props: {
    msg: String,
    number: Number
  },
  methods: {
    change() {
      this.$emit("aa", this.number + 1);
    }
  }
};
</script>

v-model还有一种写法，就是在子组件中默认的变量value进行变量接收，父组件写法不变

子组件：

<template>
  <div>
    <p>{{msg}}</p>
    <!-- <p>{{number}}</p> -->
    <p>{{value}}</p>
    <button @click="change">number+1</button>
  </div>
</template>

<script>
export default {
  //model: {
  //  prop: "number", //变量名
  //  event: "aa" //自定义的事件名
  //},
  props: {
    msg: String,
    value: Number //接收number
  },
  methods: {
    change() {
      //   this.$emit("aa", this.number + 1);
      this.$emit("input", this.value + 1); //必须使用默认的input事件进行变量更改提交
    }
  }
};
</script>

这种写法的优势在于，如果你需要父组件传一个简单的变量给子组件，并且需要父子组件同步修改，可以省略掉父组件v-on绑定给子组件的函数

mint-ui中popup组件中控制组件显示与隐藏就是用的这种方法。

但是父组件不会总是传递一个简单的基本变量给子组件，很多情况是父组件传一个对象或者数组，或者对象、数组嵌套的变量给子组件，子组件使用v-for循环渲染出一个列表，

并且列表项上会有一些可点击的部分，用来更改相应的数据，这时候，如果要父组件为每一个修改数据的行为都写一个函数，并且用v-on绑定到子组件上，那么当我在其他页面也用到这个组件，又要把这些函数拿到另外一个文件中，实在是不方便，且不优雅。

这个时候我们就要考虑在子组件data中定义一个变量，然后把props中接收得到的变量赋值给data，这样我们所有的函数就都可以写到子组件中了。

子组件参考：

<template>
  <div>
    <p>{{msg}}</p>
    <!-- <p>{{number}}</p> -->
    <p>{{value}}</p>
    <button @click="change">number+1</button>

    <div v-for="(item,index) in list" :key="index">
      <p @click="changeItemInfo(index)">{{item.a}}</p>
      <p>{{item.b}}</p>
      <p>{{item.c}}</p>
      <p>{{item.d}}</p>
    </div>
  </div>
</template>

<script>
export default {
  //model: {
  //  prop: "number", //变量名
  //  event: "aa" //自定义的事件名
  //},
  props: {
    msg: String,
    value: Number, //接收number
    contentList: Array
  },
  data() {
    list: [];
  },
  watch: {
    contentList: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.list = this.contentList;
        }
      }
    }
  },
  methods: {
    change() {
      //   this.$emit("aa", this.number + 1);
      this.$emit("input", this.value + 1); //必须使用默认的input事件进行变量更改提交
    },
    changeItemInfo(index) {
      this.$set(this.list[index], "a", "aaa"); //建议使用this.$set()提交数组或对象中的更改，否则嵌套比较深的数据更改了，视图有可能无法更新
    }
  }
};
</script>