vue中子组件向父组件传值---vue学习

vue中子组件可以向父组件传值,以下介绍具体方法

    <div id="app">
		<com @parentshow="show"></com>
	</div>

	<template id="temp">  
		<div>
			<h1>这是子组件</h1>
			<input type="button" @click="func" value="点击">
		</div>
	</template>

	<script>

        var com = {
        	template:"#temp",
        	data(){
        		return {
        			mes:"这是子组件身上的值"
        		}
        	},
        	methods:{
        		func(){
                    this.$emit("parentshow",this.mes)  //子组件触发父组件传递过来的方法
        		}
        	}
        }

		var vm = new Vue({
			el:"#app",
			methods:{
				show(data){
					console.log("这是父组件的show方法"+data)
				}
			},
			components:{
                com:com
			}
		})
	</script>

父组件传递给子组件一个带参数的方法,子组件触发该方法,并且将自身数据作为方法的参数,使父组件执行该方法,父组件就拿到了子组件中的值,这样就实现了子组件向父组件传值。

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页