Vue中父与子组件交互
记录下vue如何实现组件数据交互。
1.父组件发送数据到子组件。
父组件：
<template>
<view>
<!-- 使用 :list="datas"传递数据到子组件 codes中使用props接收 -->
<codes :list="datas"></codes>
</view>
</template>
<script>
import codes from "@/components/code/codes.vue"
export default {
data(){
return {
datas:[{
id:"123",
name:"李四"
}]
}
},
components: {
codes},//注册子组件codes
}
</script>
子组件：
<template>
<view v-for="(item, index) in list" :key="index" >
<view class="persons">id- {
{item.id}}</view>
<view class="persons">name - {
{item.name}}</view>
</view>
</template>
<script>
export default {
// 接收父组件的传值
props:{
list:{
type: Array,
//default默认数据
default: () => {
return [{
id: "1",
name:"张三"
}]
}
}
},
data(){
return{
}
},
}
</script>
2.父组件调用子组件事件、子组件发送数据到父组件。
父组件：
<template>
<view>
<!-- 使用 @goBuetooth="getList" 子组件通过this.$emit('goBuetooth',this.list)传递给父组件的getList事件接收数据 -->
<!-- 使用ref="codes" 父组件可以通过this.$refs.codes.makes();调用子组件codes的makes方法。 -->
<codes @goBuetooth="getList" ref="codes"></codes>
<button @click="codes()" >获取子组件数据</button>
</view>
</template>
<script>
export default {
data() {
return {
datas:[],
}
},
components: {
codes},//注册子组件codes
methods: {
getList(data){
console.info("父组件接收数据")
console.info(data)
this.datas=data
},
codes(){
//调用子组件事件传递数据到父组件
this.$refs.codes.makes();
}
}，
}
</script>
子组件：
<script>
export default {
data() {
return {
list:{
id:1,name:"张三"},
}
},
methods: {
makes(){
this.$emit('goBuetooth',this.list) //传递数据到父组件
}
}，
}
</script>