1、子组件向父组件传值步骤
1、父组件定义一个方法
methods:{
show(data){
this.fumsg = data;
console.log("父组件数据"+data)
}
}
2、子组件通过事件绑定调用父组件方法
<!-- 父组件向子组件传递方法，使用事件绑定机制 v-on -->
<com2 v-on:func="show"></com2>
<h1>h还没有值：{{fumsg}}</h1>
---------------上面为父组件内容，下面为子组件内容----------------------
3、定义子组件触发事件，使得子组件调用父组件方法，并传值
<input type="button" value="子组件按钮" @click="myclick">
4、子组件调用父组件方法，并传值
myclick(){
//当点击子组件按钮的时候，通过$emit触发
this.$emit(‘func‘,‘123123‘)
}
2、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- 父组件向子组件传递方法，使用事件绑定机制 v-on -->
<com2 v-on:func="show"></com2>
<h1>h还没有值：{{fumsg}}</h1>
</div>
<template id="temp">
<div>
<h1>这是子组件</h1>
<input type="button" value="子组件按钮" @click="myclick">
</div>
</template>
</div>
<script>
var com2 = {
template:‘#temp‘,
methods: {
myclick(){
//当点击子组件按钮的时候，通过$emit触发
this.$emit(‘func‘,‘123123‘)
}
}
}
//2.创建一个vue实例
//父组件
var vm = new Vue({
el: ‘#app‘,
data: {
msg:‘这是父组件的数据‘,
fumsg:‘‘,
},
methods:{
show(data){
this.fumsg = data;
console.log("父组件数据"+data)
}
},
components:{
com2
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/ywjfx/p/12556196.html
时间： 2024-11-06 03:52:26