Vue组件学习之组件自定义事件

主要介绍组件的自定义事件的概念，使用等。

何为组件自定义事件：

组件自定义事件是一种组件间的通信方式，方向是子组件====>父组件。
使用场景：A是子组件，B是父组件，如果要把B的数据传给A，可以使用props配置项，如果要把A的数据转给B，就要用到组件自定义事件或者使用props加回调函数也可实现。

先使用props加回调函数实现子组件传递数据给父组件。

main.js：

//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'// 关闭生产提示
Vue.config.productionTip = false//创建一个vue实例
new Vue({//这个目前还没学过，先知道他的作用是将app放入容器中。render: h => h(App),//配置该vue实例管理id为app的容器
}).$mount('#app')

App.vue：

<template><!-- 编写结构 --><div><!-- 传递回调函数给子组件School --><school :getSchoolNameFromSchoolVc="getSchoolNameFromSchoolVc"></school><hr><student></student><div>App获取School子组件的学校名：{{schoolNameFromSchool}}</div></div>
</template><script>
// 原本的引入
// import school from "./School.vue"
// import student from "./Student.vue"//修改后的
//引入school组件和student组件,涉及es模块化的语法
import school from "./components/School.vue"
import student from "./components/Student.vue"export default {data() {return {schoolNameFromSchool:""}},components:{//注册组件school,student},methods:{//定义一个回调函数并传递给子组件SchoolgetSchoolNameFromSchoolVc(schoolName){console.log("App获取School子组件的学校名：",schoolName);//赋值给schoolNameFromSchoolthis.schoolNameFromSchool = schoolName;}}
}
</script><style></style>

schoo.vue：

<template><!-- 编写组件结构代码，也就是html代码 --><!-- 需要一个div括住，也就是只能有一个根元素，一般使用div --><div class="orange"><div>学校：{{schoolName}}</div><div>地址：{{schoolAddress}}</div><!-- //定义一个按钮，点击传递学校名称给App组件。 --><button @click="sendSchoolNameToApp">传递学校名给App组件</button></div>
</template><script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {data() {return {schoolName:"尚硅谷",schoolAddress:"北京"}},//接收回调函数props:["getSchoolNameFromSchoolVc"],methods:{sendSchoolNameToApp(){//调用回调函数，并把学校名传递进去this.getSchoolNameFromSchoolVc(this.schoolName)}     }
}
</script><style scoped>/* 编写样式的地方 */.orange{background-color: orange;}
</style>

student.vue：

<template><!-- 编写组件结构代码，也就是html代码 --><!-- 需要一个div括住，也就是只能有一个根元素，一般使用div --><div class="orange"><div>学生姓名：{{studentName}}</div><div>年龄：{{studentAge}}</div></div>
</template><script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {data() {return {studentName:"张三",studentAge:18}},
}
</script><style>/* 编写样式的地方 */.orange{background-color: gray;}
</style>

这种方式的流程：

在父组件(App)中定义一个回调方法并传递给子组件(School)。

该回调方法是把School组件传递过来的学校名渲染在App组件对应的区域。
子组件使用props配置项接收回调函数，并且编写一个按钮，点击就调用该回调函数把数据传递到App组件中。

效果：

第二种方式是使用组件自定义事件实现：
使用组件自定义事件实现把子组件Student的学生名传递到App组件，并进行渲染。

分一下步骤：
3. 在父组件App中，设置自定义事件，并配置一个事件回调

4. 在子组件中，触发自定义事件，把值传过去。

效果：

除了在组件标签中绑定自定义事件，也可以配合ref属性在生命周期回调函数$mounted中进行绑定。

执行效果一样的。

自定义事件照样可以使用事件修饰符once。

使用props或者组件自定义事件进行子组件像父组件传递数据的方式是比较像的。
props的方式是直接把回调函数传递给子组件调用。
而组件自定义事件是把回调函数通过事件的方式暴露出去，然后子组件通过触发事件，达到调用回调函数的效果。

解绑组件自定义事件：

或者组件被销毁时，这些自定义事件会被销毁。

Vue组件学习之组件自定义事件相关推荐

Vue 组件间通信方式：自定义事件
前言前期分享的测试开发系列!Vue 组件间通信方式汇总,总有一款适合你( 5分钟教程-附项目实战案例 )中介绍了 3 种组件间的通信方法,分别是: props 全局事件总线消息订阅与发布今天给大 ...
【Vue】学习笔记-组件传值的数据累加器
[Vue]学习笔记-组件传值的数据累加器前言父级组件购物车组件计数器组件常见错误总结前言组件传值的数据累加器可以分为三个部分 App.vue为父级组件 Carts.vue表示购物车 Co ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue.js学习笔记 - 组件（二）
一.注册 // 定义 var MyComponent = Vue.extend({template: '<div>A custom component!</div>' });/ ...
Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
[vue] vue给组件绑定自定义事件无效怎么解决？
[vue] vue给组件绑定自定义事件无效怎么解决? 两种方式 1.组件外部加修饰符.navtive 2.组件内部声明$emit('自定义事件') 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...

Vue组件学习之组件自定义事件

Vue组件学习之组件自定义事件相关推荐

最新文章

热门文章