组件之间的数据共享--父组件向子组件共享数据

一句话：父组件向子组件共享数据需要使用自定义属性

也就是在父组件中定义数据，绑定给子组件

在子组件中使用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是只读的，我们需要转存一下数据