首页 > 其他分享 >前端学习-vue视频学习009-defineProps(子组件接收父组件的数据)

前端学习-vue视频学习009-defineProps(子组件接收父组件的数据)

时间:2024-03-18 23:12:10浏览次数:37  
标签:vue name gender age 组件 import 009 id defineProps

尚硅谷视频链接

defineProps-只接收

  • 父:要有数据
let personList = reactive<personArr>(
  [
      {id:'qqq1',name:'aaa',age:10,gender:'F'},
      {id:'qqq2',name:'vvv',age:30,gender:'F'},
      {id:'qqq3',name:'ddd',age:20,gender:'F',x:1}
  ]
)
  • 父:要在子标签中写入
<template>
    <Person :list="personList"/>
</template>
  • 整体如下
// 父组件
<template>
    <Person :list="personList"/>
</template>

<script lang="ts" setup name="App">
    import Person from './components/Person.vue';
    import { reactive } from 'vue';
    import { type personArr } from '@/types';

    let personList = reactive<personArr>(
        [
            {id:'qqq1',name:'aaa',age:10,gender:'F'},
            {id:'qqq2',name:'vvv',age:30,gender:'F'},
            {id:'qqq3',name:'ddd',age:20,gender:'F',x:1}
        ]
    )
</script>

  • 子:使用defineProps接收数据
<script lang="ts" setup name="Person">
    import { defineProps } from 'vue';
    
    defineProps(['list'])
    // let x = defineProps(['personList']) -- 可使用x记录下来父组件传过来的数据
</script>
  • 子:使用数据
<template>
    <div class="person">
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }} -- {{ item.age }}</li>
        </ul>
    </div>
</template>

defineProps-接收 + 限制类型

  • 修改子:
<script lang="ts" setup name="Person">
    import { defineProps } from 'vue';
    import { type personArr } from '@/types';
    
    // defineProps(['list'])
    // let x = defineProps(['personList']) -- 可使用x记录下来父组件传过来的数据

    defineProps<{list:personArr}>()
</script>
  • 如果父传输类型错误,会报错

defineProps-接收 + 限制类型 + 限制必要性(数据可传可不传) + 默认值指定(不传时展示默认值-withDefaults)

  • 子:修改为(页面能展示,但是报错)
<script lang="ts" setup name="Person">
    import { defineProps,withDefaults } from 'vue';
    import { type personArr } from '@/types';
    
    // defineProps(['list'])
    // let x = defineProps(['personList']) -- 可使用x记录下来父组件传过来的数据

    withDefaults(defineProps<{list?:personArr}>(),{
        list:[{id:'qqq1',name:'aaa',age:10,gender:'F'}]
    })
</script>
  • 父:去掉传的数据
<!-- 原代码
<template>
    <Person :list="personList"/>
</template> 
-->
<template>
    <Person />
</template>
  • 修改子中的报错:修改为一个函数:
    withDefaults(defineProps<{list?:personArr}>(),{
        list:()=>[{id:'qqq1',name:'aaa',age:10,gender:'F'}]
    })

标签:vue,name,gender,age,组件,import,009,id,defineProps
From: https://www.cnblogs.com/ayubene/p/18081673

相关文章

  • 前端框架Vue--Part 01
    1.为什么要学习Vue前端必备技能:Vue.js作为现代前端开发领域中的主流框架之一,已成为前端开发者必备的技术栈。随着前端技术的不断发展和企业需求的变化,掌握Vue.js能够确保开发者跟上行业发展步伐,适应各类Web项目的开发需求。广泛应用与岗位需求:目前,在国内外绝大多数互联网公......
  • 前端面试题-vue2和vue3的区别
    监测机制的改变vue2对数据监测使用的是Object.definePropert()对数据进行劫持,结合发布订阅者模式来实现vue3通过使用proxyAPI对数据直接进行代理。vue3优于vue3的的地方就是:vue3的proxyAPI监测的是整个对象,而不再是某个属性消除了Vue2当中基于Object.defineProperty......
  • HarmonyOS-基础之内置组件学习
    1、Image图片组件鸿蒙内置组件Image的4种写法//鸿蒙内置Image图片组件案例@Entry@ComponentstructImagePage{build(){Column({space:20}){//1、图片的第一种写法media文件夹下Image($r('app.media.pig')).width(200).height(200);//2......
  • 微信小程序自定义组件
    微信小程序中的自定义组件是指在微信小程序中创建的可重用的、可复用的组件,它可以被多个页面使用。自定义组件可以帮助我们提高开发效率,提高代码的可维护性和可重用性。以下是微信小程序中自定义组件的使用方法:一.创建自定义组件首先,我们需要在微信小程序中创建一个自定......
  • 前端学习-vue视频学习008-TS中的接口\泛型\自定义类型
    尚硅谷视频链接使用ts定义,可限制参数的类型新建ts文件//定义接口限制对象属性exportinterfacepersonInter{name:string,age:number,gender:string}//使用泛型//exporttypepersonArr=Array<personInter>//另一种写法exporttypepersonArr=p......
  • Vue3+El-Dialog实现弹框
    1.子组件childComponents.vue<template><divclass="hello">{{`在学习VUE3`}}</div><el-dialogtitle="提示"v-model="dialogVisble"width="30%"><span>这是一段信息</span><templat......
  • Java毕业设计 基于springboot vue招聘网站 招聘系统
    Java毕业设计基于springbootvue招聘网站招聘系统springbootvue招聘网站招聘系统功能介绍用户:登录个人信息简历信息查看招聘信息企业:登录企业信息管理发布招聘信息职位招聘信息管理简历信息管理管理员:注册登录管理员管理用户管理企业管理简历信息管理......
  • vue2 nuxt打包时间超过1小时异常
    使用 npmrungenerate打包时提示:Thecommand'nuxtgenerate'finishedbutdidnotexitafter5s││ThisismostlikelynotcausedbyabuginNuxt││Makesuretocleanupalltimersandlistenersyouoryour││plugins/modu......
  • vue element-ui prop 同时校验两个输入框都不能为空
    <el-row><el-col:span="24"><el-form-itemlabel="故障阈值:"class="a_row":prop="addForm.thresholdFaultMin.length==0?'thresholdFaultMin':'thresholdFaultMax&#......
  • Vue+OpenLayers7入门到实战:OpenLayers7创建自定义鹰眼控件,自定义鹰眼控件样式,调整鹰眼
    返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7入门到实战前言本章介绍如何使用OpenLayers7在地图上创建自定义鹰眼控件,自定义鹰眼控件样式,调整鹰眼控件位置、大小、文字和按钮等样式。二、依赖和使用"ol":"7.5.2"使用npm安装依赖[email protected]使用Y......