Vue的父与子奇淫技巧子传父

最新推荐文章于 2021-06-25 23:41:06 发布

「已注销」

最新推荐文章于 2021-06-25 23:41:06 发布

阅读量467

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/New_Bird_Advance/article/details/106038109

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

内容：

全局组件：公有儿子

全局组件：公有儿子

父组件传递信息给儿子

静态绑定：

在这里插入图片描述

动态绑定：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<product v-for="item in prolist" :prolist="item"></product>
			</ul>
		</div>
		<script type="text/javascript">
			let con1 = Vue.component('product',{
				props:['prolist'],
				template:`<li>
							<h2>信息：{{prolist.title}}</h2>
							<h4>价格：{{prolist.price}}</h4>
						</li>`
			})
			let app = new Vue({
				el:'#app',
				data(){
					return{
						prolist:[
							{
								title:"产品1",
								price:"82Yuan"
							},
							{
								title:"产品2",
								price:"83Yuan"
							},
							{
								title:"产品3",
								price:"84Yuan"
							},
							{
								title:"产品4",
								price:"85Yuan"
							},
						]
					}
				},
				methods:{
					
				},
				components:{
					con1
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

子组件向父组件传递信息

方法一：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<product v-for="item in prolist" :prolist="item" @customname="getinfo"></product>
			</ul>
			<h2>选中的产品是：{{childback}}</h2>
		</div>
		<script type="text/javascript">
			let con1 = Vue.component('product',{
				props:['prolist'],
				template:`<li>
							<h2>信息：{{prolist.title}}</h2>
							<h4>价格：{{prolist.price}}</h4>
							<button @click="childclick(prolist.title)">选择</button>
						</li>`,
				methods:{
					childclick(protitle){
						//自定义事件
						this.$emit('customname',protitle)
					}
				}
			})
			let app = new Vue({
				el:'#app',
				data(){
					return{
						prolist:[
							{
								title:"产品1",
								price:"82Yuan"
							},
							{
								title:"产品2",
								price:"83Yuan"
							},
							{
								title:"产品3",
								price:"84Yuan"
							},
							{
								title:"产品4",
								price:"85Yuan"
							},
						],
						childback:'无'
					}
				},
				methods:{
					getinfo(data){
						this.childback =  data	
					}
				},
				components:{
					con1
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

方法二：通过将父元素的执行函数传递到子组件，让子组件代替父元素执行

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<product v-for="item in prolist" :prolist="item" :action="getinfo" ></product>
			</ul>
			<h2>选中的产品是：{{childback}}</h2>
		</div>
		<script type="text/javascript">
			let con1 = Vue.component('product',{
				props:['prolist','action'],
				template:`<li>
							<h2>信息：{{prolist.title}}</h2>
							<h4>价格：{{prolist.price}}</h4>
							<button @click="childclick(prolist.title)">选择</button>
						</li>`,
				methods:{
					childclick(protitle){
						this.action(protitle)
					}
				}
			})
			let app = new Vue({
				el:'#app',
				data(){
					return{
						prolist:[
							{
								title:"产品1",
								price:"82Yuan"
							},
							{
								title:"产品2",
								price:"83Yuan"
							},
							{
								title:"产品3",
								price:"84Yuan"
							},
							{
								title:"产品4",
								price:"85Yuan"
							},
						],
						childback:'无'
					}
				},
				methods:{
					getinfo(data){
						this.childback =  data	
					}
				},
				components:{
					con1
				}
			})
		</script>
	</body>
</html>