vue的组件一些注意事项(props, 自定义事件)

最新推荐文章于 2025-09-29 14:11:20 发布
原创 最新推荐文章于 2025-09-29 14:11:20 发布 · 788 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨Vue.js中组件的全局注册方式，Props的多种类型检查及默认值设定，包括自定义验证函数的使用，以及如何正确处理自定义事件和原生事件的监听。

vue 的核心,就是一个一个的组件;

对于组件在使用上还是有一些需要的注意的东西的

  • 使用Vue.component(" ",{})这样注册的组件为全局注册组件;

  • Props的使用, 大小写的问题
    在这里插入图片描述
    对于传递一个对象的所有属性, 可以只使用v-bind=" "
    在这里插入图片描述

Props传值的几种方式:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})
  • 对于自定义事件, 禁止使用驼峰命名;

使用中划线即可

  • 对于自定义事件, 如果需要将原生的事件绑定到组件上时,
    需要添加修饰符, .native 来进行监听
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
Vue.js教学第七章：Vue 组件通信，Props 与自定义事件的深度解析
weixin_74149145的博客
05-20 1160
本文深入探讨了Vue.js中组件通信的两种核心方式：Props和自定义事件。Props用于父组件向子组件传递数据，具有单向数据流特性，子组件不能直接修改Props值，需通过自定义事件通知父组件进行修改。自定义事件则用于子组件向父组件传递数据，通过$emit方法触发事件，父组件通过v-on监听并处理。文章详细介绍了Props的定义、类型验证、默认值设置及动态传递数据的方法，以及自定义事件的触发、监听、事件修饰符的使用等。通过对比分析，强调了Props和自定义事件在组件通信中的不同作用和应用场景，帮助开发者更好
prop与自定义事件
langmanboy的博客
05-27 1619
prop与自定义事件 1. prop 1-1 什么是prop prop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 prop 属性的时候，它就变成了那个组件实例的一个属性 组件中 prop 通常用于将父组件的值传递给子组件使用，或者将 Vue 实例里的属性值传递到组件中使用 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop，在组件实例中访问这个值，就像访问 data 中的值一样 <!-- prop就是在组件上的属性称为prop prop会传递到组件内部 --
开发自己的vue组件所需要的注意事项
a806488840的博客
03-03 689
1.组件名字与npm里面现有的不能重复 2.组件的版本号不能重复，哪怕你把之前的版本撤销了也不能用那个版本号 3.注意npm源 4.开发是尽量把所有的源码都放在src文件夹里面，否则你稍微配的不好很可能会面临npm i （你的组件）之后找不到模块的情况 5.开发组件要尽量避免用到图片，如果要用则需要在webpack.config.js里面把 { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options:
vue 中 props 用法使用总结和示例演示
最新发布
bsklhao的博客
09-29 1016
props形式适用场景示例数组简单声明接收的属性名对象详细配置类型、默认值等。
Vue使用组件的几个注意点
Smart_J_King的博客
09-13 241
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue使用组件的几个注意点</title> <script src="./vue.js"></.
vue3【详解】组件（含父子组件传值 defineProps，props 校验，自定义事件 defineEmits，事件校验，插槽，动态组件，异步组件，透传属性 $attrs）
朝阳39的博客
05-06 3566
组件
vue父组件向子组件(props)传递数据的方法
11-29
Vue提供了多种组件间通信的方式，如`props`、事件总线、Vuex状态管理等，但在这篇文章中，我们将专注于讨论如何使用`props`来传递数据。 首先，我们要理解`props`的基本概念。`props`是Vue中允许父组件将数据传递给...
vue3父子组件之间通信porps和自定义事件
jieyucx的博客
07-21 869
Vue3中的父子组件通信利用了props和自定义事件，从而实现了数据的下传和事件的上浮，无疑为我们创造出了极大的便利。而这其中的原理和一些注意事项，都需要我们在实际的开发过程中去掌握和应用。最后，希望本文对理解Vue3中的父子组件通信机制以及如何使用props和自定义事件进行父子组件间通信有所帮助。近在最后，期待在未来的开发过程中，Vue3能带给我们更多的可能性和惊喜。
Vue2（15） 自定义事件学习笔记
反贪局
04-03 1089
在Vue2中，自定义事件是组件间通信的一种重要方式。通过自定义事件，子组件可以向父组件发送消息，从而实现数据的流动和组件的交互。本文将基于Vue2官方文档，详细阐述Vue2中自定义事件的定义、使用及其相关特性，并提供示例代码。事件名的命名规范不同于组件和prop，事件名不存在自动化的大小写转换。因此，触发的事件名需要完全匹配监听这个事件所用的名称。
vue 自定义组件和通信
03-07
4. **生命周期钩子函数**: Vue组件有自己的生命周期，包括`beforeCreate`、`created`、`beforeMount`、`mounted`等钩子函数，允许我们在特定时刻执行代码，如初始化数据、监听事件等。 二、组件间通信 1. **属性...
学习Vue之旅：Day7——props、自定义事件
qq_44139411的博客
09-07 172
父组件和子组件之间的信息传递：props、自定义事件 ①父组件要传递数据给子组件 通过props，传递属性以及属性值给子组件 <News :content="newsContent"/> 子组件要接收来自父组件的数据 子组件：News.vue <h1>新闻内容是：{{content}}</h1> export default{ props:['content'] } ②子组件要传递数据给父组件，使用自定义事件 子组件：Lo.
Vue基础之组件通信(1)props、自定义事件$emit
伟深么的博客
10-27 2329
Vue基础之组件通信(1)props、自定义事件$emit 组件化开发作为vue的几大特点之一，组件间通信是必须掌握的基础技能，props和$emit 是父子组件通信最基础的两种方式。 props 用法 在子组件上用v-bind的方式传入值，在组件内使用props接收 父组件 Dad.vue <template> <div class="Dad"> <h1>父组件</h1> <child msg="一段来自父组件的数据">&
框架技术 ----Vue的props验证和自定义事件
a23452的博客
03-13 3659
Vue框架 内容管理props验证对象类型的pros结点props验证计算属性 computed计算属性 --- 方法计算属性案例自定义事件自定义事件使用步骤声明自定义事件 emits触发自定义事件 this.$emits('name')父组件监听自定义事件自定义事件传参组件的v-model组件上使用v-model父传子子传父任务列表案例 Vue3基础：组件化开发 前面简单介绍了组件化的思想和SPA，组件的注册，还有组件的style和css等的绑定，而关于深度的组件化的概念： 比如计算属性，props
vue 四、Component 组件使用及组件之间的通信（props, EventBus ）
ws - 兮的博客空间
01-28 1164
一、组件的基本使用 使用组件（等于html引入html） 跟组件（父组件） <template> <div> <h3>父组件</h3> <hr /> <!-- 使用组件 --> <helloWorld /> </div> </template> <script&g...
vue组件通信--props、自定义事件、全局事件总线、pubsub、slot插槽
m0_60376759的博客
07-25 608
3、在发送数据的组件当中，找到bus，触发bus身上的自定义事件，本质是在调用事件的回调。2、在接收数据的组件当中，找到bus，给bus绑定自定义事件，事件的回调就留在当前组件。在子组件当中适当的时候，可以触发子组件身上绑定的事件，本质是在调用事件的回调。在父组件当中可以看到子组件对象，可以给子组件绑定事件，回调留在父组件。那么就得通过父组件告诉子组件变化的内容是什么，此时就要用到这个插槽。父组件在使用子组件的时候，可以传递结构给子组件当中的插槽。父组件在使用子组件的时候，可以传递结构给子组件当中的插槽。.
6.Vue学习记录(props、插件、事件)
weixin_63585633的博客
12-27 175
app： 生命周期钩子里：this.$refs.phone.$on('getPhoneName',this.getComputerName）使用时在组件中直接this.$bus.$on('事件名',回调函数)，当组件销毁时销毁事件 beforeDestory（）{this.$bus.$off('事件名')}3.接收数据：第一种（只接收）：props：['name']，第二种（限制类型）：props:{name:String},
谨用OnChange事件！
king_xing的专栏
01-21 1754
一、不要在OnChange事件中作释放动作！这个就不多说了，有实际项目经验的人都知道啦！   二、对设置了OnChange事件的控件赋值时，触发该事件，但因为赋值语句还有后续，OnChange事件暂时得不到执行，这时就要注意了，此时（赋值语句后续命令）不能再访问该控件了，对该控件的访问被锁定！！这时不论对控件的读或写属性操作都会引起AV错误！！   三、存在第一种的例外情况时，最好动态设置
wangEditor，最终还是要对你下手自定义粘贴
qq_36579455的博客
12-27 1318
怎么在wangeditor/editor中使用自定义粘贴的功能，自定义粘贴怎么处理剪切板中的数据，insertnode插入媒体文件之后，insertText失效了，怎么在富文本编辑器中初始化插入的视频文件的尺寸
vue2 render函数如何传递自定义事件
08-05
<think>我们参考引用[2]和引用[3]中的例子，特别是引用[3]中使用了`on`来绑定事件。 在Vue2的render函数中，我们使用`createElement`（通常简写为h）来创建虚拟节点。在创建节点时，可以通过数据对象的`on`属性来绑定事件（包括自定义事件）。 注意：对于原生事件（如click）可以直接在`on`中绑定，而自定义事件同样可以通过`on`来绑定，但是需要确保在子组件中通过`this.$emit('自定义事件名')`触发。 但是，这里有一个关键点：在父组件的render函数中，我们如何将自定义事件传递给子组件？ 实际上，在父组件中，我们可以在创建子组件的VNode时，通过`on`属性传递事件监听器。这些监听器会被添加到子组件的实例上，当子组件通过`$emit`触发事件时，父组件就能监听到。 步骤： 1. 在父组件的render函数中，使用`createElement`创建子组件的VNode。 2. 在第二个参数（数据对象）中，设置`on`属性，该属性是一个对象，键为事件名（如'my-event'），值为事件处理函数。 注意：在Vue2中，自定义事件和原生事件在语法上都是通过`on`来绑定，但是Vue会区分组件上的事件和原生DOM事件。对于组件，`on`监听的是组件通过`$emit`触发的事件；而对于原生DOM元素，`on`监听的是原生事件。 示例： 假设有一个子组件`MyButton`，它会在点击时触发一个名为`clicked`的自定义事件。在父组件的render函数中，我们可以这样绑定： ```javascript export default { render(h) { return h('div', [ h(MyButton, { on: { clicked: () => { console.log('自定义事件clicked被触发'); } } }) ]); } } ``` 另外，引用[3]中的例子展示了在子组件的render函数中如何绑定原生事件（click）到按钮上。注意，在子组件内部，我们绑定的是原生事件，所以使用`on`并指定事件名（如click）。而如果我们在子组件内部需要触发自定义事件给父组件，则需要在子组件内部使用`this.$emit`。 例如，在子组件button.vue中，我们可以在按钮的点击处理函数中触发自定义事件： ```javascript render(h) { return h('button', { on: { click: () => { // 在这里触发一个自定义事件，比如叫做'custom-click' this.$emit('custom-click'); } } }, this.text); } ``` 然后在父组件中，就可以监听这个`custom-click`事件。 总结： 在父组件的render函数中，通过`on`属性绑定自定义事件（与在模板中使用`@custom-event`等效）。 在子组件的render函数中，可以通过`on`绑定原生事件（如click）或者组件事件（如果该节点是另一个组件），然后在事件处理函数中使用`this.$emit`触发自定义事件。 因此，针对用户的问题“如何在render函数中传递自定义事件”，我们主要是在父组件的render函数中，在创建子组件VNode的数据对象的`on`属性里，以事件名为键，以处理函数为值进行绑定。 注意：在Vue2中，`.native`修饰符用于在组件上监听原生事件。在render函数中，如果要监听组件的原生事件，需要使用`nativeOn`属性。但是，这里我们讨论的是自定义事件，所以不需要使用`.native`修饰符，直接使用`on`即可。 示例代码（父组件）： ```javascript // 父组件 export default { render(h) { return h('div', [ // 子组件 h(ChildComponent, { // 普通属性 props: { someProp: 'value' }, // 事件监听 on: { 'custom-event': (data) => { console.log('收到自定义事件，数据：', data); } } }) ]); } } ``` 在子组件中，通过`this.$emit('custom-event', someData)`触发。 所以，用户的问题答案就是：在创建子组件VNode时，在数据对象的`on`属性中传递事件处理函数。 注意：如果用户是在子组件的render函数中绑定事件（比如绑定原生事件或者触发自定义事件），那么做法如引用[3]所示，在创建元素或组件时，在数据对象中设置`on`属性。 根据要求，生成相关问题： 1. 在Vue2的render函数中，如何绑定原生事件到DOM元素上？ 2. Vue2中，如何在组件的render函数中触发自定义事件？ 3. Vue2的render函数中，`nativeOn`和`on`有什么区别？ 4. Vue2中，使用render函数时如何传递props和事件监听器？</think>在 Vue 2 的 `render` 函数中传递自定义事件，需通过数据对象的 `on` 属性绑定事件监听器。以下是具体实现方法： ### 1. **父组件传递自定义事件** 在父组件的 `render` 函数中，使用 `createElement` 创建子组件时，在第二个参数的 `on` 对象中定义自定义事件监听器： ```javascript // 父组件 export default { render(createElement) { return createElement(ChildComponent, { // 传递 props props: { message: "Hello" }, // 绑定自定义事件 on: { 'custom-event': (data) => { console.log('收到子组件事件:', data); } } }); } } ``` ### 2. **子组件触发自定义事件** 在子组件的 `render` 函数中，通过 `this.$emit` 触发事件： ```javascript // 子组件 export default { render(createElement) { return createElement('button', { on: { click: () => { // 触发自定义事件并传递数据 this.$emit('custom-event', { value: 123 }); } } }, '点击触发事件'); } } ``` ### 3. **完整示例** ```javascript // 子组件 Child.vue export default { props: ['text'], render(h) { return h('button', { class: 'btn', on: { click: () => this.$emit('submit', { data: this.text }) } }, this.text); } } // 父组件 Parent.vue import Child from './Child.vue'; export default { render(h) { return h(Child, { props: { text: "提交" }, on: { submit: (payload) => alert(`收到数据: ${payload.data}`) } }); } } ``` ### 关键点说明： 1. **事件绑定位置** 父组件在 `createElement` 的第二个参数的 `on` 对象中定义事件监听器（例如 `on: { submit: handler }`）。 2. **事件触发方式** 子组件通过 `this.$emit('事件名', 数据)` 触发事件，与模板中 `$emit` 用法一致。 3. **与原生事件区别** - 自定义事件：使用 `on` 绑定（如 `on: { custom-event: handler }`） - 原生事件：在原生 DOM 元素上同样用 `on` 绑定（如 `on: { click: handler }`） 4. **注意事项** - 事件名需全小写或 kebab-case（如 `custom-event`） - 通过 `this.$emit` 的第二个参数传递数据 > 引用说明：Vue 2 的 `render` 函数通过 `on` 属性绑定自定义事件，其行为与模板中的 `v-on` 等效[^2][^3]。 --- ### 相关问题 1. Vue 2 的 `render` 函数中如何同时绑定多个事件（包括原生事件和自定义事件）？ 2. 在 `render` 函数中，如何区分组件自定义事件和原生 DOM 事件？ 3. Vue 2 的 `render` 函数与模板语法在事件处理上有哪些主要差异？ 4. 如何在 `render` 函数中实现事件修饰符（如 `.stop`, `.prevent`）的功能？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值