Vue-组件6 子组件给父组件传值
一、实质
- 父组件中定义了一个方法,该方法用来修改父组件中的数据
- 通过自定义事件绑定的方式给子组件传递父组件中的方法
- 子组件通过this.$emit(‘方法名’, [参数1], [参数2], …)的方式调用传递过来的方法
这样就实现了子组件给父组件传值
二、注意
- 父组件给子组件传递函数时,传递的是函数名,若加上括号,则是先运行该方法,然后再将该方法的返回结果绑定给事件
- 给子组件绑定自定义事件时,该自定义事件的名称,为子组件将访问的方法名
三、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<h1>父组件的值---msg={{msg}}</h1>
<!-- 4.父组件通过事件绑定的方式,将getChildData传递给子组件,事件名称即子组件将来要调用的方法名-->
<!-- 注意:传递方法时不能有(),只传递方法名-->
<child-Com @func="getChildData"></child-Com>
</div>
<!-- 1.创建子组件模板-->
<template id="childTemp">
<div>
<h1>子组件</h1>
<!-- 5.在子组件中绑定一个点击事件,没点击一次,就调用父组件传递过来的方法-->
<button @click="fnClick">给父组件传值</button>
</div>
</template>
<script>
// 2.创建子组件
Vue.component('childCom', {
template: '#childTemp',
methods: {
fnClick() { // 6.定义子组件中【给父组件传值】按钮点击事件的方法
// 7.在该方法中调用父组件传递过来的方法,通过 this.$emit('方法名', [参数1], [参数2], ...)的方式调用,方法名即为父组件中绑定的自定义事件名,为字符串形式
this.$emit('func', '子组件的值')
}
}
})
var vm = new Vue({
el: '#app',
data: {
msg: '父组件的值'
},
methods: { // 3.创建一个父组件的方法,该方法将用来传递给子组件,让子组件调用该方法
getChildData(data) {
this.msg = data
}
}
})
</script>
</body>
</html>
更新时间:2019-12-21