vue自定义事件注意事项

最新推荐文章于 2023-06-09 10:00:33 发布

UTF-886

最新推荐文章于 2023-06-09 10:00:33 发布

阅读量74

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43524562/article/details/116129507

版权

vue自定义事件注意事项

自定义事件中，若你使用一个像 webpack 这样的构建系统，那么this.$emit(‘myEvent’)是可以被父组件v-on监听到的；否则推荐你始终使用 kebab-case 的事件名，具体原因请点击自定义事件查看

一、用webpack 这样的构建系统如下
父组件
<template>
  <div id="app">
    <HelloWorld :msg="msg" @changeMsg="changeMsg" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data(){
	return {
		msg:"Welcome to Your Vue.js App"
	}  
  },
  methods:{
	  changeMsg(data){
		  this.msg = data;
	  }
  }
}
</script>
字组件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
	<button @click="onClick">按钮</button>
	
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
	  onClick(){
		  this.$emit("changeMsg",'hello world')
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
二、普通项目如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{name}}
			<News @change-name="changeNameFn"></News>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component("News",{
			template:`<button @click="onClick">按钮</button>`,
			methods:{
				onClick(){
					this.$emit("change-name",'张三')
				}
			}
		})
		new Vue({
			el:'#app',
			data:{
				name:'222'
			},
			methods:{
				changeNameFn(data){
					this.name = data;
				}
			}
		})
	</script>
</html>