vue props asyc

Props是Vue中用于父组件向子组件传递数据的一种方式。在Vue2中，父组件通过给子组件绑定一个自定义属性，在子组件中通过props进行接收。示例代码如下：

<template>
  <div class="home">
    <HelloWorld msg="父传子" @zidinbyi="zidinbyi"/>
    接收子组件传来的值---------{{shuju}}
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      shuju: ''
    }
  },
  methods: {
    zidinbyi(data) {
      this.shuju = data
    }
  }
}
</script>

在Vue3中，可以使用`defineProps`来接收父组件传递的props。示例代码如下：

<template>
  <div>
    <TheWelcome msg="给子组件传的值" @zidingyi="receive"></TheWelcome>
    子组件给父组件传的参数----{{jiehsou}}
  </div>
</template>

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
import { ref } from 'vue'

let jiehsou = ref('')

const receive = (data: string) => {
  jiehsou.value = data
  console.log(data)
}
</script>

总结起来，无论是Vue2还是Vue3，父组件传递给子组件的props的思路都是在父组件中引入子组件，在模板中使用v-bind指令绑定自定义属性并赋值，然后在子组件中通过props或defineProps接收这个自定义属性，从而获取父组件传递的数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>