Vue56-组件的自定义事件

一、什么是自定义事件 

二、子组件—【传值】—>父组件 

2-1、prop属性

父组件定义一个函数，并作为传参：

在子组件<School>中通过props属性接收父组件的函数名，并调用： 

 

2-2、v-on自定义事件

v-on在谁身上，就给谁绑定事件！

给谁绑定的事件，想触发就找谁！

子组件通过$emit触发绑定的事件。 

2-3、prop属性 VS 自定义属性

2-4、v-on的简写形式

 

2-5、ref属性实现

加了ref属性，则App.vue的实例对象，就能通过ref得到student组件的实例对象！

子组件也用$emit触发绑定的atguigu方法。

app.vue挂载完毕，就能得到student的实例对象！

$on：当xxx的时候

好处：灵活性强！

 

备注：

        通常，我们使用 props 向下（从父到子）传递数据，而使用事件（如 $emit）向上（从子到父）传递数据。 

2-6、ref属性说明

在 Vue 中，ref 主要用于直接访问 DOM 元素或子组件实例。 

如果你确实需要通过 ref 访问子组件实例并获取其数据或方法，你可以这样做：

1、子组件(ChildComponent.vue)

<template>  
  <div>  
    <p>我是子组件</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      childData: '这是子组件的数据'  
    };  
  },  
  methods: { 
    // 这是子组件的方法 
    getChildData() {  
      return this.childData;  
    }  
  }  
};  
</script>

2、父组件 (ParentComponent.vue)

<template>  
  <div>  
    <p>我是父组件</p>  
    <ChildComponent ref="childRef" />  
    <button @click="getFromChild">从子组件获取数据</button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    getFromChild() {  
      // 通过 ref 访问子组件实例  
      const childData = this.$refs.childRef.childData; // 直接访问数据（不推荐）  
      // 或者使用子组件的方法  
      const childDataMethod = this.$refs.childRef.getChildData(); // 推荐使用子组件提供的方法  
      console.log(childDataMethod); // 输出 "这是子组件的数据"  
    }  
  }  
};  
</script>

使用ref，父组件可以直接从子组件获取数据、调子组件的方法。 

2-7、自定义事件只触发一次 

或者

2-8、当触发自定义事件的时候，想要传很多数据