一句话：父组件向子组件共享数据需要使用自定义属性
也就是在父组件中定义数据，绑定给子组件
在子组件中使用props来接收到数据进行使用
tips：这里需要注意的是props是只读的，通过props接收的数据不可以在子组件中直接修改值，子组件接收到的值只是一个引用，不过可以修改成功，只是会报错，我们有需求在子组件中修改值的话，可以先转存一下再进行修改
现在我们有这样一个App.vue的组件，它的子组件为Son.vue
我们想要让子组件来使用App.vue父组件中的数据：
1.我们想要关联这俩个组件，就必须先建立一种关系：
import Son from '@/components/Son.vue'export default {
components:{
Son
}
}我们把Son.vue子组件导入到了App.vue父组件中，并使用components注册组件
2.接下来我们再App.vue父组件中定义一些数据：
data(){
return{
username:"小蜗",
age:22,
hobby:{
ball:"篮球",
life:["打代码","玩游戏","找对象"]
}
}
}这些数据就是我们想要在子组件中使用的数据
3.接下来我们需要使用v-bind来将数据通过自定义属性的方式给到子组件：
<div id="app">
<div id="count">
<h2>你好Vue--我是App组件</h2>
<p>我想让我的孩子--Son来使用我的数据</p>
</div>
<Son :username="username" :age="age" :hobby="hobby"></Son>
</div>4.在子组件中通过props接收到传过来的三个数据：
props:['username','age','hobby']5.在子组件的模板中渲染出来数据：
<div id="son">
<p>我是子组件--Son</p>
<h2>我的名字是：{
{ username }} 我的年龄是：{
{ age }}</h2>
<em>我的爱好是：{
{ hobby.ball + hobby.life[0] + hobby.life[1] + hobby.life[2]}}</em>
</div>我们查看自己本地服务器端口：
如果----我们想要修改一下值：
export default{
props:['username','age','hobby'],
data(){
return{
name:this.username,
deyball:this.hobby.ball
}
}
,
methods:{
newhobby(){
this.deyball = ''
}
}
}<div id="son">
<p>我是子组件--Son</p>
<h2>我的名字是：{
{ name }} 我的年龄是：{
{ age }}</h2>
<em>我的爱好是：{
{ deyball + hobby.life[0] + hobby.life[1] + hobby.life[2]}}</em>
<button @click="newhobby">点击去除篮球</button>
</div>为什么要这么麻烦？
因为props是只读的，我们需要转存一下数据
