Vue3 父子组件数据传递

最新推荐文章于 2024-08-02 09:29:40 发布

Modify_QmQ

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量789

点赞数

分类专栏： # vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_44973159/article/details/132390731

版权

vue3 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文介绍了在Vue应用中，如何通过`props`和`ref`实现父组件向子组件传递单个变量和对象数据，以及子组件如何接收并处理这些数据的方法。

摘要由CSDN通过智能技术生成

1、父组件向子组件传递数据

1.1、传递多个简单变量给到子组件

父组件使用

  <TitleView title="标题" :name="name" :isCollect="isCollect" @collect-event="collectEvent" />
  <script setup>
    const name = ref('名字')
    const isCollect = ref(true)
  </script>

子组件接收并且向外暴露一个方法

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps<{ title: string; name: string; isCollect: boolean }>()
const emits = defineEmits(['collectEvent'])
const isCollectRef = ref(props.isCollect)

function doCollect() {
  isCollectRef.value = !isCollectRef.value
  emits('collectEvent', isCollectRef.value)
}
</script>

1.2、传递对象给到子组件

父组件传递

<IndicatorDetail :detail="detailIndex"/>
<script setup>
const detailIndex = reactive([{
  text:'未知',
  title:'X',
  color:'green'
},{
  text:'未知',
  title:'Y',
  color:'blue'
},{
  text:'2023-08-13',
  title:'Z',
  color:'grey'
}])
</script>

子组件直接通过props接收

<script>
export default {
  props: ['detail'],
  setup(props) {

  }
}
</script>
或者
<script setup>
const props = defineProps({
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>