【Vue】基础系列（二十）-组件自定义事件的绑定以及基本使用（子给父传递数据）_解绑

【Vue】基础系列（二十）-组件自定义事件的绑定（子给父传递数据）

🌕写在前面

🍊博客主页 ：勇敢link牛牛 🎉欢迎关注：🔎点赞👍收藏⭐️留言📝

🌟本文由 勇敢link牛牛 原创

📆首发时间：🌹2022年5月6日🌹

🆕最新更新时间：🎄2022年5月6日🎄

✉️愿你熬过万丈孤独，藏下星辰大海！

📠参考书籍：📚​​《Vue2》​​

这里写目录标题

• ​​【Vue】基础系列（二十）-组件自定义事件的绑定（子给父传递数据）​​

• ​​props实现​​
• ​​自定义事件实现​​
• ​​通过ref属性​​
• ​​解绑事件​​

props实现

<!-- 通过父组件给子组件传递函数类型的props实现自给父传递数据 -->
        <School :revces="revces"></School>

        <!-- 给组件的实例对象vc绑定事件 -->
        <!-- 通过父组件给子组件绑定一个自定义事件 -->
        <Student @huoqu="demo"></Student>      

通父给子一个函数通道，在适当的时机返回一个数据，与props配置项配合使用。

返回学校名字

methods: {
        fun() {
            alert("奥利给");
            this.revces(this.name);
        },
    },      

自定义事件实现

另一种方式，由于​

​v-on​

​​，或​

​@​

​​在​

​<student>​

​组件的实例对象身上vc绑定一个事件，日后如果有人触发了这个事件，那么这个demo函数就会被调用。给谁绑定的事件，就给谁去操作（触发这个事件）

fun() {
            alert("奥利给");
            // 触发student组件实例身上的huoqu事件
            this.$emit("huoqu", this.name);
        },      

• 相同点是：都需要在父组件里面配置好methods里的回调函数。
• 第二种方式，是给组件的实例对象绑定一个自定义事件，通过​

  ​this.$emit​

  ​“引爆”这个事件。

通过ref属性

还有一种方法： 通过ref属性获取组件的实例对象

<Studen ref="student"></Studen>      

再通过组件的实例对象操作

this.$refs.student      

通过生命周期钩子（挂载完毕来访问）

mounted() {
        this.$refs.student.$on("huoqu", this.demo);
    },      

通过这种方式，对这个传递绑定事件的可操作性和灵活性就会大大增加。

mounted() {
        setTimeout(() => {
            this.$refs.student.$on("huoqu", this.demo);
        }, 30000);
    },      

如果只使用一次对事件的启动

那就

如果是这种方法的话：

this.$refs.student.$once("huoqu", this.demo);      

或者

<Student @huoqu.once="demo"></Student>      

与点击事件的api一致。

解绑事件

unfun(){
            // 解绑事件函数
            this.$off('huoqu')
            // 解绑多个事件
            this.$off(["huoqu","demo"])
        }      

// 解绑所有的事件
         this.$off()