解决子组件prop出现 Unexpected muntation of ‘userChannels‘ prop. 问题

vue 单向数据流所引发的问题

目录

看图:

解法方法: 

子组件-------------------------------

父组件---------------------------

总结:

---

看图:

 

错误的原因:我直接在修改prop里的userChannels数组,vue不允许我们直接修改子组件里的值.

解法方法: 

        父组件:  @自定义事件名='函数名'

        子组件: this.$eimt('自定义事件名',传过去的参数)

看代码:

子组件-------------------------------

onAddChannel (channel) {
      // 向父组件传值,更新数组
      this.$emit('userChannels', channel)
    }

父组件---------------------------

<template>
...
<!--    注意:  @是v-bind的缩写形式 ; 
                 @自定义事件=" 函数名 "-->
<channel-edit @userChannels="updateUserChannels"></channel-edit>
...
</template>

<script>
 // 接收 子组件传过来的值 
    updateUserChannels (item) {
        // 函数内部 更新处理 数据
      return this.channelsArr.push(item)
    }
</script>

总结:

方法还有很多种,这里就不一一说了.