**
VUE:子组件改变父级组件的信息
在Vue2.0,已经不允许子组件给父组件赋值了,但是如果我们有这个需求应该怎么做呢,下面介绍一个方法,原理就是对象的引用
<body>
<div id="box">
<h2>父组件=>{{ParData.a}}</h2>
<child-com :Child="ParData"></child-com>
</div>
<template id="child">
<div>
<h3>子组件=>{{Child.a}}</h3>
<button @click="change">点击</button>
</div>
</template>
</body>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
ParData:{
a:'我是父级的数据'
}
},
components:{
'child-com':{
template:'#child',
props:['Child'],
methods:{
change(){
this.Child.a="已经被更改了"
},
}
}
}
})
</script>
绑定数据的时候,传整个对象,当在子组件改变的时候,改变对象的一个属性,由于对象都是同一个引用,所以当子组件的数据改变之后,父组件也会改变
点击之前:
点击之后:
**
小插曲->分割线
在刚开始写的时候,遇到一个小坑,只能怪自己没好好看文档
HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名Prop-命名
- 在2和3处如果驼峰命名方式,在1处应该用相对应的 kebab-case (短横线隔开式) 命名,如果1处也用驼峰命名,数据传递不到子组件,并且没有任何报错.
- 如果23处命名为Child,则1处可命名为Child.