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

父组件向子组件共享数据使用的是自定义属性

而子组件向父组件共享数据使用的是自定义事件

也就是说连接共享数据关系链的是一个事件：

我们需要在子组件中使用$emit方法来创建一个自定义的事件，在父组件中使用该方法（也就是通过调用子组件的$emit方法触发了父组件中所使用的方法），父组件会通过事件的调用--使用参数接收到子组件中的数据：

可能这样说有点难以理解，我们通过代码实践一下：

目录

整体运行过程：

---

1.首先，我们在子组件中定义一个数据num，通过触发点击事件改变数据的同时调用了$emit()方法：

<div id="son2">
    <div>我是一个数字：{
   
   { num }}</div>
    <button @click="addnum">点击+1</button>
</div>

methods:{
    addnum(){
        this.num++
        //第一个参数为自定义事件名称
        //第二个参数为最新的num值
        this.$emit('numchange',this.num)
    }
}

接下来我们需要在父组件中触发自定义事件，拿到this.num这个子组件最新值：

先在父组件中使用data自定义一个数据：

count:0

<Son2 @numchange="getnumber"></Son2>

methods:{
    //使用val形参接收到子组件传过来的num值，并将接收到的数据赋值给自己的count
    getnumber(val){
      this.count = val
    }
}

将数据渲染到模板结构： 

<div id="app">
    <div id="count">
      <h2>{
   
   { count }}</h2>
    </div>
    <Son2 @numchange="getnumber"></Son2>
</div>

整体运行过程：

我们点击子组件按钮、触发子组件点击事件，点击事件调用了$emit方法，$emit方法触发父组件中自定义事件，自定义事件接收到子组件数据，通过插值表达式渲染到页面 

拓展：如果我们想改动父元素的数据让子元素进行同步，我们应该怎们办？

使用自定义属性：

父组件给到子组件一个自定义属性

<Son2 @numchange="getnumber" :newnum="count"></Son2>

子组件接收：

props:['newnum']

 子组件渲染接收到的值：

<div>我是一个数字：{
   
   { newnum }}</div>

目前我们无论修改父组件的数据还是修改子组件的数据都可以进行相互同步：