子组件访问父组件的数据
props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
需要显式地触发一个更新事件
b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>这是父组件</h3>
<input type="text" v-model="name">{{people.age}}
<zizujian :name.sync="name" :agea="people"></zizujian>
</div>
<hr>
<template id="app1">
<div>
<h3>这是子组件:{{username}}</h3>
<h2>{{username}}</h2>
<button @click="change">修改</button>
</div>
</template>
</body>
<script>
new Vue({
el: "#app",
data:{
name:"这是父组件",
people: {
age:18
}
},
components: {
'zizujian':{
props: ['name','agea'],
data(){
return {
username: this.name
}
},
template:'#app1',
methods: {
change: function () {
// this.username="6666" 第一种
// this.$emit('update:name',"修改完了") 第二种
this.agea.age=34 第三种
}
}
}
}
})
</script>
</html>