VUE父子组件方法及属性互相传递

一、父传子

1、父传子-属性传递

    //父组件index.vue

<template>
<view>
<childs :childData="childData"></childs>
</view>
</template>

<script>
	import childs from '../../components/child/child';
	export default {
data() 
{
	return { 
		childData:[{'name':"李四","age":25},{'name':"张火火","age":32}],
		}
},
components:{childs},

	}
</script>
<style>
</style>

//字组件child.vue
<template>
	<view>
		<view v-for="(item,index) in childData" :key="index">{
    
    {item.name}}今年{
    
    {item.age}}</view>
	</view>
</template>

<script>
	export default {
		name:"childs",
		data() {
			return {
				
			}
		},
		props:['childData'],
	}
</script>

<style>

</style>

2、父传子-方法传递

//父组件index.vue

<template>
		 <view>
		 <childs :childData="childData" :addage="addage"></childs>
		 </view>
</template>

<script>
	import childs from '../../components/child/child';
	export default {
		data() {
			return { 
			childData:[{'name':"李四","age":25},{'name':"张火火","age":32}],
		    }
		},
		components:{childs},
		onReady(){

		},	
		methods: {
			addage(ite){
			this.childData.push(ite)
			},	

}
	}
</script>

<style>

	
</style>

//子组件child.vue
<template>
	<view>
		<view v-for="(item,index) in childData" :key="index">{
    
    {item.name}}今年{
    
    {item.age}}</view>
			<button @click="addage1">添加</button>
	</view>

</template>

<script>
	export default {
		name:"childs",
		data() {
			return {
				
			}
		},
		props:['childData','addage'],
		methods: {
			addage1(ite){
				ite={"name":"中国话",'age':12};
				this.addage(ite);
			}
		}
	}
</script>

<style>

</style>

二、子传父

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

1、第一种利用this.$emit()

//子组件
<template>
	<view>
			<button @click="addA(ite)">添加</button>
	</view>

</template>

<script>
	export default {
		name:"childs",
		data() {
			return {
				ite:"我是传说中的参数",

			}
		},
		props:['childData','addage'],
		methods: {
			addA(ite){
			this.$emit('Aclick',ite)
			}
		}
	}
</script>

<style>

</style>

//父组件

<template>
		 <view>
			 <text>{
    
    {title}}</text>
		 <childs @Aclick="addclick"></childs>
		 </view>
</template>

<script>
	import childs from '../../components/child/child';
	export default {
		data() {
			return { 
			title:'',
		    }
		},
		components:{childs},
		onReady(){

		},	
		methods: {
			addclick(ite){
			this.title=ite
			},	

}
	}
</script>

<style>

2、传递方法：第二种利用vm.$on() 加代码的形式，实现的最终效果与第一种一样

//子组件
<template>
	<view>
		<button @click="addA">点击此处将‘大连’发射给父组件</button>
	</view>
</template>

<script>
	export default {
		name:"childs",
		data() {
			return {
				ite:"我是传说中的参数",
			}
		},
		props:['childData','addage'],
		methods: {
			addA(ite){
			let ite=this.ite
			this.$emit('menu',ite)
			}
		}
	}
</script>

<style>

</style>

//父组件

<template>
		 <view>
		 <childs ref="childs"></childs>
		 </view>
</template>

<script>
	import childs from '../../components/child/child';
	export default {
		data() {
			return { 
			title:'',
		    }
		},
		components:{childs},
		mounted(){
			console.log('mounted')
			this.$refs.childs.$on('menu',this.addC)
		},
		methods: {
			addC(b){
			console.log(b)
			},	

}
	}
</script>

<style>

</style>

3、父组件调用子组件的方法，可以传递数据
注意：子组件标签中的事件也不区分大小写要用“-”隔开

父组件：
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref给子组件起个名字-->
<button @click="getMyEvent">点击父组件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父组件中的数据"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
}
}
}
</script>


子组件：


<template>
  <button>点击我</button>
</template>
<script>
  export default {
    methods: {
      emitEvent(msg){
        console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
      }
    }
  }
</script>

VUE父子组件方法及属性互相传递

猜你喜欢