vue定义3个组件,组件A向组件C传递姓名,组件B向组件C传递数组爱好,组件C接收组件A和组件B传递过来的参数并显示出来
时间: 2023-11-06 21:06:06 浏览: 84
可以通过props属性实现组件间传递参数,以下是一个简单的示例代码:
```html
<!-- 组件A -->
<template>
<div>
<p>姓名:{{name}}</p>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
export default {
props: {
name: String // 接收传递过来的姓名参数
},
methods: {
changeName() {
this.$emit('change-name', 'New Name') // 触发名为change-name的自定义事件,并传递新的姓名参数
}
}
}
</script>
<!-- 组件B -->
<template>
<div>
<ul>
<li v-for="(hobby, index) in hobbies" :key="index">{{hobby}}</li>
</ul>
<button @click="addHobby">添加爱好</button>
</div>
</template>
<script>
export default {
data() {
return {
hobbies: ['篮球', '游泳'] // 默认爱好数组
}
},
methods: {
addHobby() {
this.hobbies.push('跑步') // 添加新的爱好
this.$emit('change-hobbies', this.hobbies) // 触发名为change-hobbies的自定义事件,并传递新的爱好数组参数
}
}
}
</script>
<!-- 组件C -->
<template>
<div>
<p>姓名:{{name}}</p>
<ul>
<li v-for="(hobby, index) in hobbies" :key="index">{{hobby}}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
name: String, // 接收传递过来的姓名参数
hobbies: Array // 接收传递过来的爱好数组参数
},
created() {
this.$on('change-name', (newName) => {
this.name = newName // 监听名为change-name的自定义事件,更新姓名参数
})
this.$on('change-hobbies', (newHobbies) => {
this.hobbies = newHobbies // 监听名为change-hobbies的自定义事件,更新爱好数组参数
})
}
}
</script>
```
在父组件中,可以通过v-bind指令将数据传递给子组件,如:
```html
<template>
<div>
<component-a :name="name" @change-name="handleChangeName"></component-a>
<component-b @change-hobbies="handleChangeHobbies"></component-b>
<component-c :name="name" :hobbies="hobbies"></component-c>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'
export default {
components: {
ComponentA,
ComponentB,
ComponentC
},
data() {
return {
name: '张三',
hobbies: ['篮球', '游泳']
}
},
methods: {
handleChangeName(newName) {
this.name = newName
},
handleChangeHobbies(newHobbies) {
this.hobbies = newHobbies
}
}
}
</script>
```
在子组件中,通过props属性接收父组件传递过来的参数,并通过$emit方法触发自定义事件将修改后的参数传递回父组件。在组件C中,通过created钩子函数监听组件A和组件B触发的自定义事件,更新组件C的参数。
阅读全文