vue父子组件，子父组件,非父子组件传值

最新推荐文章于 2024-08-13 14:59:12 发布

梧桐落叶~

最新推荐文章于 2024-08-13 14:59:12 发布

阅读量127

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44023519/article/details/100437181

版权

vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue父子，子父组件传值 ,props $emit

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="example-1">
			<father></father>	
		</div>
		<template id="father">
			<div id="">
               <div> {{msg}}</div>
				<son :test='infoFather' @testson='testsonHander'></son>	
			</div>
		</template>
		
		<template id="son">
			<div id="">
				{{msg}}
                {{test}}
				<!-- test 接受父组件的数据显示在这里 -->
				<button @click='clickHander'>点击触发son</button>
				<!-- 子组件先定义个单击事件 用来触发this.$emit这个方法 -->
			</div>
		</template>
		<script type="text/javascript">
			//全局注册组件
			Vue.component('father', {
				template: '#father',
				data(){
					return{
						msg:'father',
						infoFather:'how are you'
					}
				},
				 methods:{
					testsonHander(val1,val2){
						// testsonHander为父组件方法名
                        console.log(val1,val2) //这里输出传参的数据
                    }
				 }
			})
			Vue.component('son', {
				template: '#son',
				data(){
					return{
						msg:'son',
						infoSon:'i am son'
					}
				
				},
                methods:{
					clickHander(){
						// 子父传参 子组件自定义事件 自定事件由this.$emit触发 
                        this.$emit('testson','你好',this.infoSon)
                    },
				 },
				props:['test'], //父子传参 子组件通过props抛出一个自定属性 用来接收数据
				
			})
			new Vue({
				el: '#example-1',
				data: {
					
				},
				
			})
		</script>
	</body>
</html>

$parent, $children, $refs

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div>
				<table_o ref="childmsg"></table_o>
			</div>
		</div>
		<template id="table">
			<div>
				<div>{{msg}}</div>
			</div>
		</template>
		<script>
			var table_o = {
				template:"#table",
				data(){
					return{
						msg:"你好啊！世界！"
					}
				},
				mounted(){
					//获取父组件实例对象
					console.log(this.$parent)
					console.log(this.$parent.msg) //hello world
				}
			}
			var vm = new Vue({
				el:"#app",
				components:{
					table_o
				},
				data:{
					msg:"hello world",
				},
				mounted(){
					//获取子组件实例对象
					console.log(this.$children)
					console.log(this.$children[0].msg) //你好啊！世界！
					//ref
					console.log(this.$refs.childmsg.msg) //你好啊！世界！
				}
			})
		</script>
	</body>
</html>

事件总线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<zujian1 ></zujian1>
			<zujian2 ></zujian2>
		</div>
		<template id="zujian1">
			<div>
				{{msg}}
				<button type="button" @click="clickhandel">emit</button>
			</div>
		</template>
		<template id="zujian2">
			<div>
				{{msg}}---{{str1}}
			</div>
		</template>
		
		<script>
			//将组件1的i love you 传给组件2
			//事件总线 $on监听用于接收值  $emit 触发 传值
			//局部注册组件 components选项
			var zujian1={
				template:"#zujian1",
				data(){
					return{
						msg:"我是组件1",
						info:"i love you"
					}
				},
				methods:{
					clickhandel(){
						bus.$emit('busdel',this.info)
					}
				}
			}
			var zujian2={
				template:"#zujian2",
				data(){
					return{
						msg:"我是组件2",
						str1:""
					}
				},
				created(){
					// console.log(bus)
					bus.$on('busdel',(val)=>{
						console.log(val)
						this.str1 = val
					})
				},
			}
			//new 一个空的vue实例
			var bus = new Vue()	
			var vm = new Vue({
				el:"#app",
				components:{
					zujian1,
					zujian2
				},
				data:{
					msg:"hello world",
				},
			})
		</script>
	</body>
</html>