将子组件的值传递到父组件

最新推荐文章于 2022-02-13 22:01:10 发布

hanni_xie

最新推荐文章于 2022-02-13 22:01:10 发布

阅读量190

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/hanni_xie/article/details/105518277

版权

vue 作业，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子组件向父组件传递参数</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<p>{{message}}</p>
			<parent-component></parent-component>
		</div>
		<script>
			//父组件
			Vue.component('parent-component',{
				data:function(){
					return{sonMsg:""}
				},
				methods:{
					recvMsg:function(msg){
						this.sonMsg=msg;
					}
				},
				template:`<div>
				<h1>父组件</h1>
				<h3>子组件传递过来的数据:{{sonMsg}}</h3>
				<child-component v-on:abc="recvMsg"></child-component>
				</div>`
			})
			//子组件
			Vue.component('child-component',{
				data:function(){
					return{myInput:""}
				},
				methods:{
					sendMsg:function(){
						this.$emit("abc",this.myInput);
					}
				},
				template:`<div>
				<h1>子组件</h1>
				<input type="text" v-model="myInput">
				<button v-on:click="sendMsg">发送</button>
				</div>`
			})
			
			new Vue({
				el:'#app',
				data:{
					message:"hello Vue.js"
				},
				methods:{},
				computed:{}
			})
		</script>
	</body>
</html>