0


vue3+ts深入组件(一)Props

一、Props 声明

一个组件需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute

在使用SFC时,props 可以使用 defineProps() 宏来声明:

如子组件中
(1)
const props = defineProps(['foo'])

(2)
const props = defineProps({
    title:String,
    age:Number
})
(3)搭配ts 可使用类型标注
const props = defineProps<{
    title:String,
    age?:Number
}>()

二、传递静态prop(只能是字符串)

父组件
<Cpn say-hello="Hello"  />

子组件中
const props = defineProps<{
sayHello:String
}>

注意:vue3官方文档中介绍,prop 与事件的名字也提供了自动的格式转换。
子组件中用camelCase 形式命名
但在父组件中可以使用 kebab-case 形式来监听。
与 prop 大小写格式一样,在模板中我们也推荐使用 kebab-case 形式来编写监听器。
即 addEvent 会自动解析为add-event 并且由于代码位置及风格匹配,提高了模板的可读性
官方推荐利用这种代码特性 来书写 prop 及事件
本文中即为:(sayHello 与say-hello)

三、传递非字符串类型,使用v-bind

如传递数组
<Cpn :names=['A','B','C']>
传递数字
<Cpn :num="24">
传递对象
<Cpn :author="{
    name:'Asen',
    age:'20'
}">

你可以使用一个对象绑定多个prop并传递参数

const prop = {
    name:'Asen',
    age:'20'
}

模板中
<Cpn v-bind="prop">

四、prop校验

在子组件中可以进行校验

const props = defineProps({
// 基础类型检查
  // (给出 `null` 和 `undefined` 值则会跳过任何类型检查)
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传,且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认,这不是一个工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})

五、单向数据流

子组件中不允许直接修改父组件传递过来的参数(会抛出错误)
如需修改,可以在子组件中先获取到传递过来的值以后再次进行修改


const props = defineProps({
    name:"Asen"
})

const myname = ref(props.name)

此时再次修改myname 即可

文末
新人创作,还望支持!欢迎学习交流,如有错误,还请指正!
已更新于2022/11/22


本文转载自: https://blog.csdn.net/Wps1919/article/details/127980081
版权归原作者 Asen-coder 所有, 如有侵权,请联系我们删除。

“vue3+ts深入组件(一)Props”的评论:

还没有评论