赞
踩
defineProps 是vue3提供的方法,不需要引入可以直接使用,用于子组件接收父组件传递的参数,且只读不可更改。
代码如下(示例):
<template> <div class="box"> <h1>我是父组件</h1> <hr /> <Child info="我是子组件" :money="money"></Child> </div> </template> <script setup lang="ts"> //props:可以实现父子组件通信,props数据还是只读的!!! import Child from "./Child.vue"; import { ref } from "vue"; let money = ref(10000); </script> <style scoped> .box { width: 100vw; height: 400px; background: yellowgreen; } </style>
代码如下(示例):
<template> <div class="son"> <h1>我是子组件</h1> <p>{{props.info}}</p> <p>{{props.money}}</p> <!--props可以省略前面的名字---> <p>{{info}}</p> <p>{{money}}</p> <button @click="updateProps">修改props数据</button> </div> </template> <script setup lang="ts"> //需要使用到defineProps方法去接受父组件传递过来的数据 //defineProps是Vue3提供方法,不需要引入直接使用 let props = defineProps(['info','money']); //数组|对象写法都可以 //按钮点击的回调 const updateProps = ()=>{ // props.money+=10; props:只读的 console.log(props.info) } </script> <style scoped> .son{ width: 400px; height: 200px; background: hotpink; } </style>
注意,defineProps接受的参数只读,不可以更改。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。