Vue3手册译稿 – 深入组件 – 自定义事件

本章节需要掌握组件基础
emit我译成发射,觉得发射这个词比较形象的形容将子组件事件发射出来的一个动作。

事件名

像组件和props,事件名也会进行自动转换,如果你在子组件里发射一个驼峰命名的事件,你就可以在父组件中添加一个短横线分隔的监听:

this.$emit('myEvent')
<my-component @my-event="doSomething"></my-component>

因为有props情形存在,模板内DOM议使用短横线分隔命名方式。如果你使用字符串模板,则不存在这个限制。

自定义事件定义

Vue School自定义事件视频教程

自定义事件发射(请子组件传递到父组件)可以通过emits选项:

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

当在emits中定义了一个原生事件(如click)时,组件事件将会代替原生事件监听。

提示
推荐定义所有已发射的事件,以便记录组件是如何工作的

验证已射事件

prop类型验证一样,一个已发射事件如果通过对象语法而不是数组语法,也可以被验证。
添加一个验证,事件会分配一个函数来接收参数,并传递给$emit调用,返回一个布尔值来确认事件是否有效。

app.component('custom-form', {
  emits: {
    // 无验证
    click: null,

    // 验证提交事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('不合法的 submit 事件加载!')
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})

v-model参数

默认组件的v-model使用modelValue作为prop和update:modelValue作为事件。我们可以传递一个参数给v-model修改这些名称:

<my-component v-model:title="bookTitle"></my-component>
app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})

在这个案例中,子组件会同步接收titleprop,发射update:title事件:

app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})
<my-component v-model:title="bookTitle"></my-component>

v-model绑定

正如前面所学习v-model参数,我们可以为同一个组件实例添加多个v-model参数。
每个v-model可以与不同的prop相同步,组件不需要额外的选项:

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>
app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName'],
  template: `
    <input
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

我们来写一个完整点的例子,实现一个区号-座机输入组件,结果如下图:

代码如下:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>component v-model</title>
	<script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
		<div id="app">
			<tel-input v-model:tel-number="telNumber" v-model:area-number="areaNumber"></tel-input>
			<p>
				{{areaNumber}}-{{telNumber}}
			</p>
		</div>
   </body>
   <script type="text/javascript">
	const data_and_methods = {
		data() {
			return {
				telNumber: '',
				areaNumber:  ''
			}
		},
		methods: {
			
		}
	}
	const app = Vue.createApp(data_and_methods)
	app.component('tel-input',{
		props: {
			areaNumber:String,
			telNumber:String
		},
		emits: ['update:areaNumber','update:telNumber'],
		template: `
			<input placeholder="区号" type="number" class="qqworld-org the-best-plugins area-number" :value="areaNumber" @input="$emit('update:areaNumber',$event.target.value)" />
			-
			<input placeholder="座机号码" type="number" class="qqworld-org the-best-plugins tel-number" :value="telNumber" @input="$emit('update:telNumber',$event.target.value)" />
		`
	})
	
	app.mount("#app")
   </script>
   <style type="text/css">
		.area-number {width:60px;}
	</style>
</html>

处理v-model修饰符

在前面我们学习输入绑定时,v-model有一些内置的修饰符如.trim,.number,.lazy等。有些情形,你也想增加一些自定义的修饰符。
让我们来创建一个capitalize修饰符,使用v-model绑定将输入首字母转换为大写。
组件v-model修饰符通过modelModifersprop提供给组件。下面的例子,我们创建了一个含有默认为空对象 的modelModifiersprop组件。
注意在组件created生命周期勾子触发器中,modelModifiersprop包含capitalize且值是true – 当它被设置在v-model绑定v-model.capitalize="myText"

<my-component v-model.capitalize="myText"></my-component>
app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  template: `
    <input type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
})

现在我们设置好了prop,我们检测modelModifiers对象的键,然后通过方法处理要发射出去的值。下面我们来把输入框的首字母转换为大写:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>component v-model modifiers</title>
	<script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
		<div id="app">
			<my-component v-model.capitalize="myText"></my-component>
			<p>{{ myText }}</p>
		</div>
   </body>
   <script type="text/javascript">
	const data_and_methods = {
		data() {
			return {
				myText: ''
			}
		}
	}
	const app = Vue.createApp(data_and_methods)
	app.component('my-component',{
		props: {
			modelValue: String,
			modelModifiers: {
				default: () => ({})
			}
		},
		emits: ['update:modelValue'],
		template: `
			<input type="text"
				:value="modelValue"
				@input="emitValue" />
		`,
		methods: {
			emitValue(e){
				let value = e.target.value
				if(this.modelModifiers.capitalize){
					value = value.charAt(0).toUpperCase() + value.slice(1)
				}
				this.$emit('update:modelValue',value)
			}
		},
		created() {
			console.log(this.modelModifiers)
		}
	})
	
	app.mount("#app")
   </script>
</html>

v-model绑定参数,生成的prop名将会是arg+"modelModifiers"

<my-component v-model:description.capitalize="myText"></my-component>
app.component('my-component', {
  props: ['description', 'descriptionModifiers'],
  emits: ['update:description'],
  template: `
    <input type="text"
      :value="description"
      @input="$emit('update:description', $event.target.value)">
  `,
  created() {
    console.log(this.descriptionModifiers) // { capitalize: true }
  }
})

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

一个名叫Sentinel-Rules-SDK的组件,使得Sentinel的流控&熔断规则的配置更加方便

2021-3-15 19:38:00

经验教程

图像匹配 | NCC 归一化互相关损失 | 代码 + 讲解

2021-3-16 9:36:00

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索