首页 > 其他分享 >props配置

props配置

时间:2022-12-07 11:55:36浏览次数:34  
标签:vue name age 配置 address 组件 ref props

实例
App.vue文件

<script setup>
import Student from './components/Student.vue'
import {ref} from 'vue'
let address=ref('上海')
</script>
<template>
    <div>
        <Student name='刘备'  sex='男' :address="address"/>
    </div>
</template>

Student.vue子组件

<script setup>
import {ref,defineProps, toRefs} from 'vue'
const props=defineProps({
    name:{
        type:String,//name的类型是字符串
        required:true,//name是必要的
    },
    age:{
        type:Number,
        default:99,//默如果不传值,则默认99
    },
    sex:String,
    address:String
})
let msg=ref('欢迎来到三国')
let myAddress=ref('')
const {name,age,sex,address}=toRefs(props)
const changeAge=()=>{
    address.value=666
}
myAddress.value=address.value
const changeAddress=()=>{
    myAddress.value='南京'
}
</script>
<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名:{{name}}</h2>
        <h2>学生年龄:{{age+2}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <h2>学生地址:{{myAddress}}</h2>
        <button @click="changeAddress">修改地址</button>
    </div>
</template>

静态传参:只需要name='章三'
动态传参:需要通过v-bind绑定,:address='address',此处address为表达式,会自动解析address代表的某个值
特例:传入age时,子组件中配置age为数值型,所以需要通过v-bind绑定age
如果需要修改某个父组件传过去的值,可以通过在子组件中重新设置一个变量来接受父组件传过来的参数,然后在子组件中设置一个函数用来修改新建变量的值。

标签:vue,name,age,配置,address,组件,ref,props
From: https://www.cnblogs.com/shuchenhao/p/16962655.html

相关文章

  • (Java跳蚤网/IT枫斗者)详细步骤Jdk16下载安装与环境变量配置
    一:首先去官网下载Jdk如下地址复制到浏览器。1、下载地址:​​https://www.oracle.com/java/technologies/javase-jdk16-downloads.html​​2、点击下载,下载完了之后双击它。......
  • (Java跳蚤网/IT枫斗者)详细步骤Jdk16下载安装与环境变量配置
    一:首先去官网下载Jdk如下地址复制到浏览器。1、下载地址:​​https://www.oracle.com/java/technologies/javase-jdk16-downloads.html​​2、点击下载,下载完了之后双击它。......
  • Go的安装和环境配置
    最近准备学Go,和大家分享了一下我的安装配置方法Golang的安装官网地址:https://golang.google.cn/dl/如图:我这里选用的是使用标准包安装(Mac、Linux用户根据需求下载指定......
  • 四阶段:第24周 微服务下Sentinel流量防控卫兵 apollo相关配置
                                   ......
  • 高通GPIO配置简介
    GPIO中断,调试和客制化PA2GPIO/Interruptnon-HLOS覆盖non-HLOSGPIO/Interrupt软件驱动,GPIO是标准通用输入输出。Msm与外设之间最基本的输入/输出接口.msm提供GPIO数量......
  • 基于xml的Spring配置一(SpringBean 的配置详解)
    Spring开发中主要是对Bean的配置,Bean的常用配置一览如下:Xml配置方式功能描述<beanid=""class="">Bean的id和全限定名配置<beanname="">通过name设置Bean的别名,通过别名也......
  • openEuler 22.03-LTS 基础配置
    1设置语言环境您可以通过localectl修改系统的语言环境,对应的参数设置保存在/etc/locale.conf文件中。这些参数会在系统启动过程中被systemd的守护进程读取。1.1显示当前......
  • 动态获取配置文件
    首先是添加NuGet包依赖,主要依赖一下3个包Microsoft.Extensions.ConfigurationMicrosoft.Extensions.Configuration.FileExtensionsMicrosoft.Extensions.Configuration.......
  • Java入门(二) —— 开发工具配置
    教程中所用到的工具请关注微信公众号:科技前端,回复“工具”即可获得。Java开发工具最常用的就是Eclipse和IDEA,不过我个人推荐用IDEA。下面我将分别介绍这两个软件。一、E......
  • HCIA学习笔记四十九:PPPOE原理及配置
    一、DSL1.1、DSL应用场景• 数字用户线路DSL是以电话线为传输介质的传输技术。1.2、PPPoE在DSL中的应用二、PPPoE原理2.1、PPPoE报文• PPPoE报文是使用Etherne......