单项数据流

什么是单项数据流

举个小例子

父组件App.vue

给子组件绑定一个message属性传值1999

父组件App.vue中的代码：

<template>
    <div id="app">
        <Home :num="message"/>
    </div>
</template> 

<script>
import Home from "./compontents/home/index.vue";
export default {
    name:"App",
    components:{
        Home
    },
    data(){
        return{
            page:"Home",
            message:1999
        }
    }
}
</script>
 
<style>

</style>

 

子组件index.vue（在components/home/下）

添加一个按钮，绑定点击事件，在methods中添加一个handleModify方法，提供一个num=2000，实现点击修改子组件中的数据。（将1999改变成2000）

子组件index.vue中的代码：

<template>
    <div class="home">
        <h2>{{num}}</h2>
        <button @click="handleModifty()">修改</button>
    </div>
</template>

<script>
export default {
    name:"Home",
    methods:{
        handleModifty(){ 
            this.num=2000;
        }
    },
    props:{
        num:{
            type:Number,
            required:true
            }
    }
}
</script>

<style>
    .home{
        background: blue;
    }
</style>

效果如  图1、图2、：

图1：

图2：

虽然能够达到需要的效果但是会有错误警告

从Vue.js官网查到这个警告的官方解释是

为了避免这种警告的发生可以把index.vue(子组件)代码修改为如下

<template>
    <div class="home">
        <h2>{{n}}</h2>
        <button @click="handleModifty()">修改</button>
    </div>
</template>

<script>
export default {
    name:"Home",
    methods:{
        handleModifty(){ 
            this.n=2000;
        } 
    },
    data(){
        return{
            // 做第一次监听
            n:this.num
        }
    },
    // 拿到数据后做一个监听
    watch:{
        num(newVal){
            this.n=newVal
        }
    },
    props:{
        num:{
            type:Number,
            required:true
            }
    }
}
</script>

<style>
    .home{
        background: blue;
    }
</style>

用一个n对要修改的数据做一个中间的代理，不能直接去修改这个数据。

总结

官方的解释不太好理解，那么换成通俗的话来讲就是：
当父组件给子组件传递数据的时候，子组件只允许进行数据的读，而不允许做数据的改。因此当子组件改变父组件传递过来的数据的话会造成数据流难以理解。（可以理解为：当发生错误时就无法精确到是谁造成了错误）