[Vue]组件——通过$emit自定义组件事件

1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text:

Vue.component(‘blog-post‘, {
  props: [‘post‘],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit(‘enlarge-text‘)">
         Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

2.用 v-on 在上述组件上监听这个事件,就像监听一个原生 DOM 事件一样:

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

详情见官网:https://cn.vuejs.org/v2/guide/components.html

原文地址:https://www.cnblogs.com/vickylinj/p/9577797.html

时间: 2024-10-05 05:08:59

[Vue]组件——通过$emit自定义组件事件的相关文章

Vue之彻底理解自定义组件的v-model

最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: 1 <div id="app"> 2 <input v-model="price"> 3 </div> 1 new Vue({ 2 el: '#app', 3 data: { 4 price: '' 5 } 6 }); 通

Vue组件的操作-自定义组件,动态组件,递归组件

作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件. v-mdel指令实现数据的双向绑定: <div> 用户名:<input type="text" v-model="name"> </div> 输入用户名是:{{name}} &l

关于vue如何创建一个自定义组件(这是项目中经常得用的)

1. 首先作大米饭我们得有米吧 要不 巧妇难为无米之炊啊  因此先买好我们自己的大米也就是创建组件文件,这里我假设要创建一个自己loading效果组件 那么我们就先创建 loading.vue 里面的代码根据vue template相关规则写就可以 这里就不在赘述了 我只写一个最最简单的例子 2.ok了 米就这么愉快的买好了 那么有了米我们现在只需要把他放在锅里!那么这个锅是谁呢!好吧我们自己来背这个锅,我们创建一个相关的.js文件 通常组件都是一个功能自己一个文件夹那么每个组件都应该有自己独立

小程序组件化、自定义组件

如何创建自定义组件? 文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html 其实和页面是一样一样的 在页面中如何引入自定义组件? 在当前页面的json文件中注册组件 组件名:“相对路径/绝对路径” 在wxml中使用就可以了 如果组件中间不需要写上内容的话,也可以使用单标签 补充一下,在自定义组件的json文件中 component:true,不能写成false或删除,否则它就不是组件了

Vue.extend提供自定义组件的构造器

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上. 自定义无参数标签 我们想象一个需求,需求是这样的,要在博客页面多处显示作者的网名,并在网名上直接有链接地址.我们希望在html中只需要写<message></message> ,这和自定义组件很像,但是他没有传递

Delphi笔记-自定义组件

Delphi笔记-自定义组件 (2010-09-08 16:46:34) 转载▼ 标签: it 分类: delphi 凡是从TComponent继承下来的对象能够被窗体设计器所操纵. 创建一个组件时应该注意的几个方面:1.首先,要确定是否需要创建一个独特的新组件.2.来好好规划一下组件的工作方式.3.做好了准备工作,不要急于实际创建组件,得先问问自己:到底需要这个组件干什么?4.把组件从逻辑上分为几个部分.这样,不仅有利于组件的模块化.简单化,而且能使代码精炼.组织良好.设计组件时,要考虑到可能

微信小程序开发---自定义组件

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法

Vue组件之实现自定义事件

自定义事件本质是由子组件向父组件传递信息 1.子组件,触发click点击事件时,通过$emit(...)触发父组件里自定义的事件defclick <template> <div role="alert" :class="['el-alert',changeAlert,'is-center','is-light']"> <i :class="['el-alert__icon',changeIcon]"></

vue获取验证码倒计时,自定义组件点击事件不生效的问题

说明:部分组件使用的是element-ui 子组件 <template> <div class="count-down"> <el-button type="primary" size="small" style="width:80px;" :disabled="disabled || time > 0"> {{ text }} </el-button>