Vue父子组件传值---子传父($emit)
官网的一句话：父子组件的关系可以总结为 props 向下传递，事件方法向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。子组件渲染父组件的数据，在上一篇文章中做了一些解释，这里要说明的是，子组件使用 $emit触发父组件的自定义事件。父组件向子组件传递方法，使用的是 事件绑定机制；v-on: 当我们自定义一个事件属性之后，那么，子组件就能够通过某...
·
文章目录
官网的一句话：父子组件的关系可以总结为 props 向下传递，事件方法向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。
子组件渲染父组件的数据，在上一篇文章中做了一些解释，这里要说明的是，子组件使用
$emit触发父组件的自定义事件。
父组件向子组件传递方法，使用的是 事件绑定机制；
v-on:当我们自定义一个事件属性之后，那么，子组件就能够通过某种方法，来调用传递进去的这个方法了。
$emit语法：
vm.$emit(eventName,args);
参数说明：第一个参数 eventName，表示自己定义事件名称。
第二个参数：表示要传给父组件的参数。
例子：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title></title>
<script src='../lib/vue.js'></script>
</head>
<body>
<div id='app'>
<!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制；v-on ，当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方法，来调用 传递进去的这个方法了 -->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<H1>这是子组件</H1>
<input type="button" value="这是子组件中的按钮-点击它，触发 父组件传递过来func方法" @click="myClick">
</div>
</template>
<script>
// 定义了一个字面量类型的 模板对象
var com2 = {
template: '#tmpl', //通过制定了一个 Id，表示 说，要去加载 这个制定Id的 template 元素中的内容，当做 组件的 HTML 结构
data() {
return {
sonmsg: {
name: '小儿子',
age: 15
}
}
},
methods: {
myClick() {
// 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func方法，并调用这个方法?
// emit 英文原意：触发 调用 发射的意思
this.$emit('func', this.sonmsg); //第一个参数是自定义事件的名称，后边这个就是传参
}
},
}
var vm = new Vue({
el: '#app',
data: {
datamsgFromSon: null
},
methods: {
show(data) {
console.log('调用了父组件身上的 show 方法----' )
console.log(data)
this.datamsgFromSon = data; //子组件向父组件传值
}
},
components: {
com2
// 在属性中，上边可以直接解析成这样 com2:com2
}
})
</script>
</body>
</html>
最简单易懂的例子(一看就懂)
简单理解：父组件通过传递 注册函数方法 给子组件，在子组件中，子组件通过 $emit(“传给子组件的方法名”,xxx) 来把要传的值通过参数传给父组件；
父组件
//这里父组件把getCount方法传递给子组件，
//但是getGoodsCount也是一个【带参数】的函数方法，需要在父组件中实现业务，
//然后在子组件中通过，$emit('getCount',xxx) 触发getCount函数，从而实现传参给父组件触发getGoodsCount方法
<template>
<numberbox @getCount="getGoodsCount"></numberbox>
</template>
<script>
export default {
data(){
return {
goodsCount:1
}
},
methods:{
getGoodsCount(count){
this.goodsCount=count;
}
}
}
</script>
子组件
<template>
</template>
<script>
export default {
data(){
return{
currentCount:10
}
},
methods:{},
watch:{
//我在这里的例子，是做一个监听用的，监听 currentCount 这个值发生变化，
//然后立即触发 【父组件传过来的getCount方法】，把新的值传给父组件
'currentCount':function(newValue,oldValue){
//$emit('函数名',要传的参数)
this.$emit("getCount",newValue)
}
}
}
</script>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献15条内容
所有评论(0)