Vue-组件自定义事件

父组件使用props传递数据给子组件，子组件给父组件通信除了通过父组件提前给子组件传递一个函数，子组件使用该函数，利用传递参数的形式给父组件传值，回调在父组件中，

这里再提供一种方法：Vue的自定义事件，本文将详细介绍Vue自定义事件

使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

绑定自定义事件的方式

❤️ 第一种方式 ❤️

在父组件中：

<Student @atguigu ='test' /> 或 <Student v-on:atguigu = 'test'>

methods:{

//除了接受第一个参数，其他参数都放在数组里面

test(name, ...params) {.....}

}

❤️ 第一种方式 ❤️

在父组件中：

<Student ref ='demo' />

methods:{

//除了接受第一个参数，其他参数都放在数组里面

test(name, ...params) {.....}

}

mounted() {

this.$refs.demo.$on('atguigu',this.test)

}

子组件触发自定义事件

this.$emit('atguigu',this.name, this.sex, 800)

// 子组件触发自定义事件的时候可以传递多个参数

解绑自定义事件

❤️ 解绑一个自定义事件：this.$off('atguigu')

❤️ 解绑多个自定义事件：this.$off(['atguigu', 'demo'])

❤️ 解绑所有的自定义事件：this.$off()

组件上也可以绑定原生DOM事件，需要使用native修饰符

<Student ref = "student" @click.native="show">

注意事项：

通过this.$ref.xxx.$on('atguigu',回调)。绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

完整案例

App.vue父组件

<template><div class="bgq"><h1>{{ atguigu }}-{{studentname}}</h1><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父专递数据(第一种写法使用@)添加once的话就是只触发一次@atguigu.once --><!-- <Student @atguigu="getStudentName" @demo="m1" /> --><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父专递数据(第二种写法使用ref) --><Student ref="student" @click.native="show" /></div>
</template><script>
import Student from "./components/Student.vue";
export default {name: "App",components: { Student },data() {return {atguigu: "你好啊",studentname: "",};},methods: {getStudentName(name, ...params) {//除了接受第一个参数，其他参数都放在数组里面console.log("收到了学生的名字", name, params);this.studentname = name;},m1() {console.log("demo被触发了");},show(){alert('我是被绑定在组件上面的原生的DOM事件')}},mounted() {//绑定自定义事件//3秒后出发// setTimeout(() => {//   this.$refs.student.$on("atguigu", this.getStudentName);// }, 3000);//正常触发this.$refs.student.$on("atguigu", this.getStudentName);//只触发一次// this.$refs.student.$once("atguigu", this.getStudentName);},
};
</script><style scoped>
.bgq {background-color: skyblue;padding: 5px;
}
</style>

Student.vue子组件

<template><div class="bg"><h2>学生名称：{{ name }}</h2><h2>学生性别：{{ sex }}</h2><h2>number: {{ number }}</h2><button @click="add">点我number子加</button><button @click="sendStudentName">点我获得学生的姓名</button><button @click="unbind">解绑atguigu事件</button><button @click="dath">点我摧毁Student组件的饿实例对象vc</button></div>
</template><script>
export default {name: "Student",data() {return {name: "张三",sex: "男",number: 0,};},methods: {//原生dom事件增加add() {console.log("我是原生DOM事件，即使Student组件被摧毁了，我还是会调用，但是页面不会输出");this.number++;},sendStudentName() {//触发student组件实例身上的auguigu事件 传递多个参数this.$emit("atguigu", this.name, this.sex, 800);//触发damo事件this.$emit("demo");},unbind() {//解绑atguigu事件，只能解绑一个自定义事件// this.$off('atguigu')//解绑多个自定义事件this.$off(["atguigu", "demo"]);//解绑所有的自定义事件// this.$off();},dath() {//摧毁了stedent的实例对象vc，摧毁后所有的Student身上的自定义事件不起效果this.$destroy();},},
};
</script><style scoped>
.bg {background-color: plum;padding: 5px;margin-top: 10px;
}
</style>

Vue-组件自定义事件相关推荐

Vue组件自定义事件
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src=& ...
Vue组件学习之组件自定义事件
主要介绍组件的自定义事件的概念,使用等. 何为组件自定义事件: 组件自定义事件是一种组件间的通信方式,方向是子组件====>父组件. 使用场景:A是子组件,B是父组件,如果要把B的数据传给A, ...
Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子组件中把数据传递给父组件,当时我用的方法是,让父组件给子组件传递一个函数,然后子组件把要传过来的数据放在那 ...
vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
vue组件自定义v-model
转载自 vue组件,自定义v-model方法 1 <my-component v-model="obj"></my-component> 在使用my-co ...
[Vue]组件——通过$emit为组件自定义事件
1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text: Vue.component('blog-post', {props: ['post'] ...
Vue.js 自定义事件
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果触发一个 camelCase 名字的事件: this.$emit( ...
【踩坑日记】Vue组件@click事件点击没有反应
项目场景: 在自定义组件上绑定@click事件无法触发问题描述: 在自定义组件上绑定@click事件无法触发 <template><div>自定义组件<div> ...
Vue 组件，事件，循环，父子传值，非组件传值 vuex
<template> <div> <button @click="changebnt(1)">第一项</button> ...

Vue-组件自定义事件

绑定自定义事件的方式

❤️ 第一种方式 ❤️

<Student @atguigu ='test' /> 或 <Student v-on:atguigu = 'test'>

methods:{

//除了接受第一个参数，其他参数都放在数组里面

test(name, ...params) {.....}

}

❤️ 第一种方式 ❤️

<Student ref ='demo' />

methods:{

//除了接受第一个参数，其他参数都放在数组里面

test(name, ...params) {.....}

}

mounted() {

this.$refs.demo.$on('atguigu',this.test)

}

子组件触发自定义事件

this.$emit('atguigu',this.name, this.sex, 800)

// 子组件触发自定义事件的时候可以传递多个参数

解绑自定义事件

组件上也可以绑定原生DOM事件，需要使用native修饰符

Vue-组件自定义事件相关推荐

最新文章

热门文章