Vue v-model改变父组件传递的值报错
0
悬赏园豆：5
[已关闭问题]
关闭于 2020-03-12 09:55
刚学习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>
