引入:
在开发过程中,我们会经常遇到需要组件之间相互进行通信:
-
比如App可能使用了多个相同的子组件,每个地方的子组件展示的内容不同,那么我们就需要使用者传递给子组件一些数据,让其进行展示;
-
又比如我们在父组件中一次性请求了所有子组件的数据,那么就需要传递给它们来进行展示;
-
也可能是子组件中发生了事件,需要由父组件来完成某些操作,那就需要子组件向父组件传递事件;
父子组件之间如何进行通信呢?
-
父组件传递给子组件:通过props属性;
-
子组件传递给父组件:通过$emit触发事件;
父组件传递给子组件
在开发中很常见的就是父子组件之间通信,比如父组件有一些数据,需要子组件来进行展示:这个时候我们可以通过props来完成组件之间的通信;
什么是Props呢?
-
Props是你可以在组件上注册一些自定义的attribute;
-
父组件给这些attribute赋值,子组件通过attribute的名称获取到对应的值;
Props有两种常见的用法:
-
方式一:字符串数组,数组中的字符串就是attribute的名称;
-
方式二:对象类型,对象类型我们可以在指定attribute名称的同时,指定它需要传递的类型、是否是必须的、默认值等等;
Props的数组用法
Person.vue
<template>
<!--组件的结构-->
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
</template>
<script>
//组件交互相关的js代码
export default{
name:'Person',
props:["name","age"],
data(){
return {
}
},
}
</script>
<style>
/*组件的样式 */
p{
color:red;
}
</style>
App.vue
<template>
<div>
<Person name="张三" age="21"/>
<hr/>
<Person name="李四" age="20"/>
</div>
</template>
<script>
import Person from './components/Person.vue'
export default {
name:'App',
data() {
return {
};
},
components:{
Person,
},
};
</script>
<style lang="scss" scoped>
</style>
效果图:
Props的对象用法
数组用法中我们只能说明传入的attribute的名称,并不能对其进行任何形式的限制,接下来我们来看一下对象的写法是如何让我们的props变得更加完善的。
当使用对象语法的时候,我们可以对传入的内容限制更多:
比如指定传入的attribute的类型
比如指定传入的attribute是否是必传的
比如指定没有传入时,attribute的默认值
props:{
name:{
type:String,
required:true,
default:'无名氏'
},
age:{
type:Number,
required:true,
},
},
子组件传递给父组件
什么情况下子组件需要传递内容到父组件呢?
-
当子组件有一些事件发生的时候,比如在组件中发生了点击,父组件需要切换内容
-
子组件有一些内容想要传递给父组件的时候
我们如何完成上面的操作呢?
-
首先,我们需要在子组件中定义好在某些情况下触发的事件名称; 自定义事件
-
其次,在父组件中以v-on的方式传入要监听的事件名称,并且绑定到对应的方法中
-
最后,在子组件中发生某个事件的时候,根据事件名称触发对应的事件
CounterOperation.vue
<template>
<div>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
name: 'CodeCounterOperation',
//用于声明由组件触发的自定义事件。
emits:['addOne','subOne'],
data() {
return {
};
},
mounted() {
},
methods: {
increment(){
//自定义事件
//通过this.$emit(事件名[,参数列表]) 发出事件
this.$emit('addOne')
},
decrement(){
this.$emit('subOne')
}
},
};
</script>
<style lang="scss" scoped>
</style>
App.vue
<template>
<div>
<h2>当前计数:{{count}}</h2>
<!--在子组件绑定自定义事件-->
<Counter-Operation @addOne="add" @subOne="sub"/>
</div>
</template>
<script>
import CounterOperation from './components/CounterOperation.vue'
export default {
name:'App',
data() {
return {
count : 0,
};
},
components:{
CounterOperation,
},
methods:{
add(){
this.count++;
},
sub(){
this.count--;
}
}
};
</script>
<style lang="scss" scoped>
</style>
效果图:
细节:
可以使用this.$emit(事件名,参数列表)的形式给父组件传递参数