vue3的prop

- 父组件需要传多个值给子组件
把值放对象，通过v-bind传整个对象
父组件

<script setup>
import BlogPost from './BlogPost.vue'
import { reactive } from 'vue';
// 要传给子组件的所有值，用reactive包了该对象后，父组件的值变了，子组件的值也跟着改变。
const testObj = reactive({
prop1:1,
prop2:2,
prop3:3
})</script><template><button @click="testObj.prop3++">{{testObj.prop3}}</button><BlogPostv-bind="testObj"></BlogPost>
</template>

v-bind="testObj"等同于:prop1=testObj.prop1 :prop2=testObj.prop2 :prop3=testObj.prop3
子组件

<script setup>
defineProps(['prop1','prop2','prop3'])</script><template><h4>{{prop1}}</h4><h4>{{prop2}}</h4><h4>{{prop3}}</h4>
</template>

运行