一、props
$ref 和 props 都可以实现父组件向子组件通信。
props 通过在子组件中声明自定义的属性,在父组件中可以使用它们,如
//子组件
<template>
<div>
<h3>{{ocean01}}</h3>
<h3>{{ocean02}}</h3>
</div>
</template>
<script>
export default{
name: 'Child',
props: [
'ocean01', // 声明自定义的属性
'ocean02'
]
}
</script>
则在父组件中可以通过(1)直接通过属性传递数据;(2)通过JavaScript表达式进行动态赋值,如:
<template>
<div>
<h1>我是父组件!</h1>
<!--通过自定义属性传递数据-->
<child ocean01="我是子组件一!"></child>
<!--用一个JS表达式进行动态赋值,v-bind简写为冒号-->
<child v-bind:ocean02="a+b"></child>
<!--用一个变量进行动态赋值,v-bind简写为冒号-->
<child v-bind:ocean02="tms"></child>
</div>
</template>
<script>
import Child from '../components/Child.vue'
export default{
name:'Father',
components: {
Child
},
data(){
return{
a:'我是子组件二!',
b:'112233',
tms: '我是子组件三!'+ Math.random()
}
}
}
</script>
结果为:
二、$ref
$ref 和 props 都可以实现父组件向子组件通信。
props 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用 prop;
$ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且 ref 用在 dom 元素的时候,能起到选择器的作用,这个功能比作为索引更常见。
//子组件
<template>
<div>
<h3>{{ocean03}}</h3>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return{
ocean03: '' //props和$ref都可以实现父组件向子组件通信。
} //prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
}, //$ref着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能起到选择器的作用,这个功能比作为索引更常有用到。
methods:{
getMessage(m){
this.ocean03 = m;
}
}
}
</script>
父组件为:
//父组件
<template>
<div>
<h1>我是父组件!</h1>
<child ref="qwe"></child>
</div>
</template>
<script>
import Child from '../components/Child.vue'
export default{
name:'Father',
mounted(){
console.log(this.$refs.qwe);
this.$refs.qwe.getMessage('测试下refs通过方法传数据')
},
}
</script>
结果为:
三、$emit
通过 $emit(eventName,msg)触发事件,子组件给父组件传递数据,父组件通过 $on:eventName 监听事件,接收数据。
//子组件
<template>
<div>
<h3>我是子组件</h3>
</div>
</template>
<script>
export default{
name: 'ChildA',
mounted(){ //通过$emit(eventName,msg)子组件给父组件传递数据,父组件通过@eventName接收数据
this.$emit('getChildData','我是子组件传递给父组件的数据') //$emit(event,args)触发事件event,并且传递参数args
}
}
</script>
//父组件
<template>
<div>
<h1>我是父组件!</h1>
<child-a @getChildData="showMsg"></child-a>
<h1>{{title}}</h1>
</div>
</template>
<script>
import ChildA from '../components/ChildA.vue'
export default{
name:'FatherA',
components: {
ChildA
},
data(){
return{
title:''
}
},
methods:{
showMsg(args){
this.title = args;
}
}
}
</script>
结果为:
四、$on
$on 是监听子组件 $emit 事件的变化,从而触发某个事件,这里再举个例子
//子组件
<template>
<div>
<span>子组件:</span>
<span @click="select(0,$event)" :class="{'active': selectType===0}">测试0、</span>
<span @click="select(1,$event)" :class="{'active': selectType===1}">测试1、</span>
<span @click="select(2,$event)" :class="{'active': selectType===2}">测试2</span>
</div>
</template>
<script>
export default{
name: 'TestSon',
data(){
return {
selectType: 0
}
},
methods:{
select(type,event){
this.selectType = type
this.$emit('select-type',type) //通过$emit(eventName,msg)子组件给父组件传递数据,父组件通过@eventName接收数据
}
}
}
</script>
<style>
.active{
color: yellow;
}
</style>
//父组件
<template>
<div>
<test-son @select-type="onSelectType"></test-son>
<h2>这是父组件的:{{selectType}}</h2>
</div>
</template>
<script>
import TestSon from '../components/TestSon.vue'
export default{
name: 'TestFather',
components: {
TestSon
},
data(){
return{
selectType: 0,
}
},
methods:{
onSelectType(type){
this.selectType=type
}
}
}
</script>
结果为: