vue中emit的用法
vue中子传父参数的方法共有两种:1、子组件通过emit传输2、通过自定义组件传输下列优先讲解下其emit的传输方法在父组件中(1)首先需要定义其改变的函数,一般emit多用于点击事件,例如我目前所在地的名称是北京,我想通过子组件的点击,导致我的名称发生其改变(2)定义其data属性存储器数据<template><div class="hello"><h2>我是
vue中子传父参数的方法共有两种:
1、子组件通过emit传输
2、通过自定义组件传输
下列优先讲解下其emit的传输方法
在父组件中
(1)首先需要定义其改变的函数,一般emit多用于点击事件,例如我目前所在地的名称是北京,我想通过子组件的点击,导致我的名称发生其改变
(2)定义其data属性存储器数据
<template>
<div class="hello">
<h2>我是父组件,我需要建立一些参数</h2>
<h3>我所在地的名称是:{{ msg }}</h3>
<span><mHome @showCityName="updateCityName" /></span>
</div>
</template>
<script>
import mHome from "@/views/Home.vue";
export default {
components: {
mHome,
},
data() {
return {
msg: "北京",
};
},
methods: {
updateCityName(data) {
this.msg = data.msg;
},
},
};
</script>
在子组件中
(1)定义其点击方法,并且传入其需要改变的值,例如我所改变的是城市为武汉
(2)定义emit函数,并且传输的showCityName需与父组件的点击事件名称保持一致才行
(3)通过data进行传参处理即可
<template>
<div class="home">
<h1>我是子组件</h1>
<h2 @click="change('武汉')">测试其emit组件</h2>
</div>
</template>
<script>
// @ is an alias to /src
export default {
methods: {
change(val) {
let data = {
msg: val,
};
this.$emit("showCityName", data);
},
},
};
</script>
效果图
总结:
(1)需要在其子组件中定义
e
m
i
t
事
件
(
2
)
emit事件 (2)
emit事件(2)emit的传递子组件和父组件的函数名需要保持一致
更多推荐
所有评论(0)