vue 父与子组件之间数据传递

最新推荐文章于 2021-03-02 15:24:06 发布

阿龙剥虾喂猪จุ๊

最新推荐文章于 2021-03-02 15:24:06 发布

阅读量206

点赞数 1

本文链接：https://blog.csdn.net/long_boxiaweizhu/article/details/89489271

版权

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
//vue作用域app
	<div id="app">
		<v-cl></v-cl>//插入父组件
	</div>
	//父组件模板
	<template id="zu">
		<div>
			<div id="">
				父组件
			</div>
			<ul>
				<li>{{name}}</li>
				<li>{{shi}}</li>
				<li><input v-model="shi" type="text" name="" id="" value="" /></li>
			</ul>
			<ul>
				<li>{{age}}</li>
				<li>{{shik}}</li>
				<li><input v-model="shik" type="text" name="" id="" value="" /></li>
			</ul>
			<v-gh :sonshi=shi :sonshik=shik @bian="sonbian"></v-gh>
				
		</div>
	</template>
	//子组件模板
	<template id="son">
		<div>
			<button @click="gbian">儿子</button>
			<div id="">
				子组件
			</div>
			<ul>
				<li>{{name}}</li>
				<li>{{sonShi}}</li>
				<li><input v-model="sonShi" type="text" name="" id="" value="" /></li>
			</ul>
			<ul>
				<li>{{age}}</li>
				<li>{{sonShik}}</li>
				<li><input v-model="sonShik" type="text" name="" id="" value="" /></li>
			</ul>
		</div>
	</template>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	<script>
	//创建vue实例
		new Vue({
			el: "#app",
			//创建父组件
			components: {
				"vCl": {
					template: "#zu",
					data() {
						return {
							name: "name",
							age: "age",
							shi: "父组件",
							shik: 18,
						}
					},
					methods:{
						sonbian(gb){
							this.shi=gb[0];
							this.shik=gb[1];
						}
					}
					,
					//创建子组件
					components: {
						"vGh": {
							props:['sonshi',"sonshik"],
							template: "#son",
							data() {
								return {
									name: "name",
									age: "age",
									sonShi: "子组件",
									sonShik: "29",
								}
							},
							created(){
								this.sonShi=this.sonshi;
								this.sonShik=this.sonshik;
							},
							watch:{
								sonshi(){
									this.sonShi=this.sonshi;
									
								},
								sonshik(){
									this.sonShik=this.sonshik;
								}
							},
							methods:{
								gbian(){
									this.$emit("bian",[this.sonShi,this.sonShik])
								}
							}
						}
					}
				}
			}
		})
	</script>
</body>

阿龙剥虾喂猪จุ๊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 父与子组件之间数据传递

<head> <meta charset="UTF-8"> <title></title></head><body>//vue作用域app <div id="app"> <v-cl></v-cl>//插入父组件 </div> //父组件模板 <t...
复制链接

扫一扫