vue3 props 05

父组件

<code-pre class="code-pre" id="pre-7KFTFx"><code-line class="line-numbers-rows"></code-line><script setup lang="ts">
<code-line class="line-numbers-rows"></code-line>import person from '@/components/person.vue'
<code-line class="line-numbers-rows"></code-line>import { ref, reactive, defineProps } from 'vue'
<code-line class="line-numbers-rows"></code-line>import { type Person } from '@/types/index'
<code-line class="line-numbers-rows"></code-line>let personList = reactive<Person>([
<code-line class="line-numbers-rows"></code-line>    { id: '1', name: 'zhansan', age: 18 }
<code-line class="line-numbers-rows"></code-line>])
<code-line class="line-numbers-rows"></code-line>console.log(personList)
<code-line class="line-numbers-rows"></code-line></script>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line><template>
<code-line class="line-numbers-rows"></code-line>  <div>
<code-line class="line-numbers-rows"></code-line>    <person a="组件" b="要打印接收的参数只能把defineProps也一起打印" :list="personList"/>
<code-line class="line-numbers-rows"></code-line>  </div>
<code-line class="line-numbers-rows"></code-line></template>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line><style scoped></style>
</code-pre>

　　子组件

<code-pre class="code-pre" id="pre-MY6Zx7"><code-line class="line-numbers-rows"></code-line><script setup lang="ts">
<code-line class="line-numbers-rows"></code-line>import { ref, reactive, withDefaults } from 'vue'
<code-line class="line-numbers-rows"></code-line>import { type Person } from '@/types/index'
<code-line class="line-numbers-rows"></code-line>// 接收a
<code-line class="line-numbers-rows"></code-line>// defineProps(['a','b'])
<code-line class="line-numbers-rows"></code-line>// defineProps只接收
<code-line class="line-numbers-rows"></code-line>// let x = defineProps(['a', 'b','personList'])
<code-line class="line-numbers-rows"></code-line>// 接收list+限制类型
<code-line class="line-numbers-rows"></code-line>// defineProps<{list:Person}>()
<code-line class="line-numbers-rows"></code-line>// 接收list+限制类型+限制必要性+指定默认值
<code-line class="line-numbers-rows"></code-line>// defineProps<{ list?: Person }>()
<code-line class="line-numbers-rows"></code-line>// 终极写法
<code-line class="line-numbers-rows"></code-line>withDefaults(defineProps<{ list?: Person }>(), {
<code-line class="line-numbers-rows"></code-line>    list:()=> [{
<code-line class="line-numbers-rows"></code-line>        id: '1111',
<code-line class="line-numbers-rows"></code-line>        name: 'lisi',
<code-line class="line-numbers-rows"></code-line>        age: 18
<code-line class="line-numbers-rows"></code-line>    }]
<code-line class="line-numbers-rows"></code-line>})
<code-line class="line-numbers-rows"></code-line>// 要打印接收的参数
<code-line class="line-numbers-rows"></code-line>// console.log(x)
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line></script>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line><template>
<code-line class="line-numbers-rows"></code-line>    <div>
<code-line class="line-numbers-rows"></code-line>        <!-- <p>{{ a }}</p>
<code-line class="line-numbers-rows"></code-line>        <p>{{ b }}</p> -->
<code-line class="line-numbers-rows"></code-line>        <p>{{ list }}</p>
<code-line class="line-numbers-rows"></code-line>        <ul>
<code-line class="line-numbers-rows"></code-line>            <li v-for="(item, index) in list" :key="index">
<code-line class="line-numbers-rows"></code-line>                名字:{{ item.name }}
<code-line class="line-numbers-rows"></code-line>            </li>
<code-line class="line-numbers-rows"></code-line>        </ul>
<code-line class="line-numbers-rows"></code-line>    </div>
<code-line class="line-numbers-rows"></code-line></template>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line><style scoped></style>
</code-pre>

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/wencaiguagua/p/18059980.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！