vue学习之路在子组件传给父组件使用model 出现的warn 为解决

最新推荐文章于 2023-03-04 22:46:13 发布

记录杂文

最新推荐文章于 2023-03-04 22:46:13 发布

阅读量232

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ShenYouRong/article/details/106374813

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>review vue 2  component </title>
	<script src="../vuejs/vue.js"></script>
</head>
<body>
	<div id="app1">
		
	</div>
	<script >
		Vue.component("Father",{
				data(){return{
					msg:"我要把值传给son",
				}},
				components:{},
				template:`
					<div>
						<p> 我是father组件</p>
					 	<Son :childData="msg"/>
					</div>
					 
				`,
				methods:{},
		});
		Vue.component("Son",{
				data(){return{
					msg2:" observe v",
				}},
				components:{},
				template:`
					<div>
						<p>我是子组件</p>
						<p>{{childData}}</p>
						<input type="text" :value="childData"  /> <br /> <br />
						<h3>在子组件传给父组件使用v-model出现的warn</h3>
						<input type="text" v-model="childData" />
						<h2> v-model_2</h2>
						<h3>单独在自己组件内使用v-model 没有warn</h3>
						<p> {{msg2}}</p>
						<input type="text" v-model="msg2" />

					</div>
					


				`,
				methods:{},
				props:['childData'],
		})
		var App ={
				data(){return{}},
				components:{},	
				template:`
					<div>
						<Father/>

					</div>
				`,
				methods:{},
		};
		var vm = new Vue({
				el:"#app1",
				data(){return{}},
				components:{App},
				template:`
					<App/> 

					`,
				methods:{},
		});
	</script>


</body>
</html>