vue之单向数据流

const app = Vue.createApp({
    data(){
        return{
            message:'hello world',
            num:1
        }
    },
    template:'<div>{{message}} <test :num="num"></test></div>',
});
app.component('test',{
    props:['num'],
    template:`<div @click="num+=1">{{ num }}</div>`
})
app.mount('#app')

控制台报

[Vue warn]: Attempting to mutate prop "num". Props are readonly.

单项数据流概念：子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据

解决方法：
在子组件复制一份

const app = Vue.createApp({
    data(){
        return{
            message:'hello world',
            num:1
        }
    },
    template:'<div>{{message}} <test :num="num"></test></div>',
});
app.component('test',{
    props:['num'],
    data(){
        return{
            cpnum : this.num
        }
    },
    template:`<div @click="cpnum+=1">{{ cpnum }}</div>`
})
app.mount('#app')