首页新闻找找看学习计划

Vue v-model改变父组件传递的值报错

0
悬赏园豆:5 [待解决问题]

刚学习vue,父组件Props传递数据到子组件中,v-model 绑定到子组件中 然后子组件通过事件传到父组件中弹出,效果正常,但是网页报错了,好像是因为v-model改变了父组件传递的值所以报错了,有大佬可以详解一下,以下是代码,可直接复制查看。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<!--
声明子组件,在父组件components中挂上,在父组件template中使用
props通信到子组件中,首先在父组件使用子组件标签上定义属性(定义属性格式 :ABC="数据") 如ABC
在子组件中用props["ABC"],接收则可任意使用
-->
<div id="ppp"></div>
<script>
//子组件的子组件
var V1={
template:'<div><input type="text" v-model="DATA4" @input="ChangeValue(DATA4)"></div>',
props:["DATA4"],
methods: {
ChangeValue(val){
this.$emit('ChangeValue', val)
}
}

 };
 //子组件
 var V2={
    template:'<div><V1 :DATA4="dataaaa" @ChangeValue="Changea"></V1></div>',
    components:{V1},
    data() {
        return {
            Vval:this.dataaaa
        }
    },
     props:["dataaaa"],
     methods: {
        Changea(val){ 
         //alert(val);
        }
     }
     
 };
 //父组件
 var V3= {
     data() {
         return {
            DATA3:"HHH"
         }
     },
     components:{V2},
     template:'<div><V2 :dataaaa="DATA3"></V2></div>'
     ,
 };
 //绑定到id为app上
 var app= new Vue({
     el:"#ppp",
     components:{V3}
     ,
     template:'<div><V3></V3></div>'
 });


</script>

</body>
</html>

小青跟您拼了的主页 小青跟您拼了 | 初学一级 | 园豆:7
提问于:2019-12-19 18:02
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册