vue学习记录笔记（父子组件传值：子传父--this.$emit）

一、在vue学习中，父子组件间子组件传值给父组件最基础的方法就是通过this.$emit(时间名，子组件中需要传的值名)

1、首先，同样的建两个组件，父组件和子组件，父组件中需要引入子组件。

子组件代码：

<template>
  <div style="background: #42b983">
    <h1>这是子组件Son</h1>
    <h2>{{message}}：{{num}}</h2>
    <button @click="add">加法</button>
  </div>
</template>

<script>
export default {
  name: "son",
  data(){
    return{
      message:'可以变化不：',
      num: 0
    }
  },
  mounted() {
    this.$emit('add',this.num)
  },
  methods:{
      add(){
        this.num++
      }
  }
}
</script>

在子组件data中定义一个字段：num，该值就是需要动态传给父组件的值，

然后通过：this.$emit('add',this.num)  将这个值绑定到add事件中（注：可以向父组件传递多个值）

这是父组件代码：

在父组件中，引入子组件<son>，同时在组件标签中添加个事件，@子组件传过来的事件名=父组件自定义的事件名，如下代码：

<template>
  <div id="app" style="display: flex">
    <img style="flex: 1" alt="Vue logo" src="./assets/logo.png"  @click="toClick">
    <div style="flex: 2">
      <HelloWorld :msg="message"/>
      <son ref="son" @add = 'toAdd'>{{value}}</son>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Son from './components/son'

export default {
  name: 'App',
  components: {HelloWorld,Son},
  data(){
    return {
      message: 0,
      value:0
    }
  },
  mounted() {
    console.log('this.$refs:',this.$refs)
  },
  methods:{
    toClick(){
      this.message++
    },
    toAdd(value){
      this.value = value
    },
  }
}
</script>

 父组件接收子组件传过来的值在自定义事件中就可以取到啦！

并且在子组件通过按钮【加法】，点击可进行子组件中num值的增加，并且可动态的在父组件中显示。