$emit,父组件传data给子组件,子组件通过$emit来触发父组件中绑定在子组件身上的事件,达到改变父组件中的data的方法。下面介绍$emit传值的几种方法:
一:$emit传递单值
子组件Test.vue:
<template>
<div>
<div>子组件</div>
<button @click="changeFather">点击我向父组件传递参数</button>
</div>
</template>
<script>
export default {
methods: {
changeFather() {
this.$emit("changeEvent",'1');
}
}
};
</script>
<style>
</style>
父组件:App.vue
<template>
<div id="app">
<p>这是父组件</p>
<div>{{myString}}</div>
<Test @changeEvent="changeMyString" />
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: "App",
components: { Test },
data: function() {
return {
myString: ''
};
},
methods: {
changeMyString(val) {
console.log(val);
this.myString=val;
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
点击按钮效果如图:
二:$emit传递多个值
子组件Test.vue:
<template>
<div>
<div>子组件</div>
<button @click="changeFather">点击我向父组件传递参数</button>
</div>
</template>
<script>
export default {
methods: {
changeFather() {
this.$emit("changeEvent",'1','2');
}
}
};
</script>
<style>
</style>
父组件App.vue:
<template>
<div id="app">
<p>这是父组件</p>
<div>{{myString}}</div>
<Test @changeEvent="changeMyString" />
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: "App",
components: { Test },
data: function() {
return {
myString: ''
};
},
methods: {
changeMyString(val0,val1) {
console.log(val0,val1);
this.myString=val0+val1;
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
点击按钮,效果如下:
$emit传递多个值时,还可以采用数组的形式:
修改子组件Test.vue:
<template>
<div>
<div>子组件</div>
<button @click="changeFather">点击我向父组件传递参数</button>
</div>
</template>
<script>
export default {
methods: {
changeFather() {
this.$emit("changeEvent",['1','2']);
}
}
};
</script>
<style>
</style>
父组件App.vue:
<template>
<div id="app">
<p>这是父组件</p>
<div>{{myString}}</div>
<Test @changeEvent="changeMyString" />
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: "App",
components: { Test },
data: function() {
return {
myString: ''
};
},
methods: {
changeMyString(val) {
console.log(val);
this.myString=val[0]+val[1];
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
点击按钮,效果如下:
三:子组件通过$emit传递给父组件传递值,并且父组件有自定义参数时:
子组件Test.vue:
<template>
<div>
<div>子组件</div>
<button @click="changeFather">点击我向父组件传递参数</button>
</div>
</template>
<script>
export default {
methods: {
changeFather() {
this.$emit("changeEvent",1,2);
}
}
};
</script>
<style>
</style>
父组件:App.vue
<template>
<div id="app">
<p>这是父组件</p>
<div>{{myString}}</div>
<Test @changeEvent="changeMyString('myParameter',...arguments)" />
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: "App",
components: { Test },
data: function() {
return {
myString: ''
};
},
methods: {
changeMyString(...args) {
console.log(args);
this.myString=args;
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
点击按钮,效果图如下: