子传父

子传父

1.子传父

子组件: 通过自定义事件$emit（触发事件源）,来传递数据
父组件: 通过触发自定义事件来接收参数.

2.用法

子组件
<template>
  <div class="box">
    <h1>子组件</h1>
     <input type="text" v-model="name" @change="change1">
    <div>name的值为:{{name}}</div>
    <button @click="send">发送</button>
  </div>

</template>

<script>
export default {
  data(){
    return {
      name:'华晨宇',
      age:28,
    }
  },
  methods:{
    send(){
      /**
       * $emit()
       * 参数一: 触发事件的名称
       * 参数二: 传递的数据,string number boolean array object
      */
      this.$emit('bb',this.name)
    },
    // 不可以
    change1(){
      this.$emit('aa',this.name);
    }
  }
}
</script>

<style>

</style>

父组件
<template>
  <div class="box">
    <h1>父组件</h1>

    <div>name的值为:{{newName}}</div>
    <!-- 接收自定义事件传递的参数,须通过$event来接收 -->
    <v-child2 @bb="change" @aa="change1"></v-child2>
  </div>
</template>

<script>
import vChild2 from './child2.vue'
export default {
  data(){
    return {
      newName:''
    }
  },
  components:{
    vChild2
  },
  methods:{
    change(name){
      // 接收
      // console.log(name);
      this.newName = name
    },
    change1(name){
      console.log(name);
      this.newName = name
    }
  },
  mounted(){
    // $emit():做自定义事件的传递
    console.log(this);
  }
}
</script>

<style>

</style>