vue视频教程系列第十六节-子组件给父组件传值

vue视频教程系列第十六节-子组件给父组件传值

上一节主要讲了父组件如何向子组件传值，这一节课主要讲子组件是如何向父组件传值的。

我们首先介绍一下今天要使用的案例—实现一个加减的功能，并且显示相应的数字，如同购物车加减数量的功能。

接下来我们首先要创建一个Counter.vue的组件

Html部分：

这里面的num是动态的，还需要注意一点，这个子组件在不同的父组件里时，可能其起始值的需求可能是不一样的，所以这个num需要从父组件里传值过来，以达到这个组件的灵活性。

 

Js部分—按照常理，我们应该是进行下面的操作的，做点击事件的处理喽：

props: ['num'],

 data () {

  return {

  }

 },

 methods: {

   increment() {

     this.$emit("incre")

   },

   decrement() {

     this.$emit("decre")

 }

 }

很简单啊，这有什么难的啊！是这样的吗？我们看下页面显示—功能是没有问题的，看起来一切都先完美啊！可是可是，我们看下控制台，会吓一大跳，一片红！What?出什么事了？

来解释一下：

Num是父组件传过来的数据，而你在子组件里竟然给修改覆盖了！真的是胆大包天噢！敢动老子的东西？这万万不行的。Vue也是遵守孝道的良民好吧！这事千万使不得的，要改也需要老子来改喽！

大家可以换位思考一下啦，子组件被不同的父组件调用，或者在相同的父组件里被调用多次，如果每个子组件都要改父组件的数据，那么就乱，完全是失控状态了，所以一定要有规矩。

Vue的机制就是子组件里是不可以覆盖父组件的数据的！

怎么办呢？

只有在子组件里去通知父组件，我的值要改变，然后在父组件里兼听到这种需求后，就立即执行！

这就是两步骤：

1.    在子组件里发送自定义事件

2.    在父组件里兼听事件后执行

子组件里的代码：

     

Js部分：

props: ['num'],

 data () {

  return {

  }

 },

 methods: {

   increment() {

     this.$emit("incre")

   },

   decrement() {

     this.$emit("decre")

 }

 }

父组件里的代码：

Js部分：

import Counter from './components/Counter.vue'

 export default {

   components: {

     'v-counter': Counter

   },

   data() {

     return {

        num: 6

     }

   },

   methods: {

     increment() {

       this.num++

     },

     decrement() {

       this.num--

     }

 }

 }

父组件向子组件传值，显示其POWER，子组件向父组件传值，显示规矩

欢迎加入微信交流群：duzhan2018