vue中子组件触发父组件中的函数
总体来说就是，通过'v-on'事件绑定符绑定一个父组件的函数，然后在子组件中通过$emit来触发，$emit()中的第一个参数是 在父组件中绑定函数时自定义的函数名，第二个参数往后则为传递到父组件函数中的参数，代码如下，可直接复制看结果。html部分代码：<!DOCTYPE html><html><head><meta charset...
·
总体来说就是，通过'v-on'事件绑定符绑定一个父组件的函数，然后在子组件中通过$emit来触发，$emit()中的第一个参数是 在父组件中绑定函数时自定义的函数名，第二个参数往后则为传递到父组件函数中的参数，代码如下，可直接复制看结果。
html部分代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h1>这是父组件 -- {{fatherMsg}}</h1>
<!--传递方法时 需要使用事件绑定符('v-on') -->
<!-- 此处的func为自定义，但是需要在子组件中通过$emit触发该方法时的方法名相同-->
<child v-on:func="show"></child>
</div>
<template id="tmpl">
<div>
<h1>这是子组件 -- {{childMsg}}</h1>
<input type="button" name="" @click="myClick" value="点击改变父组件的值" />
</div>
</template>
</body>
</html>js部分代码：
<script type="text/javascript">
let child = {
template: "#tmpl", // 通过指定了一个id ，表示说要去加载这个指定id的tmplate 元素中的内容，当做组件的html结构
data() { // 组件的data只能是function,new 一个vue实例的时候data是对象
return {
childMsg: "fromchild"
}
},
methods: {
myClick() {
// 通过$emit方法触发函数执行
this.$emit('func', this.childMsg) // 后面依次传入参数，在父组件接收
}
}
}
// 创建vue实例,得到viewModule
var vm = new Vue({
el: "#app",
data: { // new一个vue实例的时候，这里的data可以是对象，也可以是函数
fatherMsg: "fromfather"
},
// data() {
// return {
// fatherMsg: "fromfather"
// }
// },
methods: {
show(data) {
console.log(data); // fromChild
this.fatherMsg = data; // 将子组件中传过来的参数在父组件中使用
}
},
components: {
child // 注册组件
}
})
</script>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)