Vue Typescript @Prop

语法：@Prop(options: (PropOptions | Constructor[] | Constructor) = {})参数说明：@Prop装饰器接收一个参数，这个参数可以有三种写法：Constructor例如String，Number，Boolean等，指定 prop 的类型；Constructor[]指定 prop 的可选类型；PropOptions可以使用以下选项：type，default，required，validator。

<!--* @FilePath: \hello-typescript\src\components\Child.vue
-->
<template><div style="border: 1px solid black;padding: 2rem;"><h1>Child Component</h1><span>{{pMsg}}</span><br/><!-- <span>{{prMsg}}</span><br/> --><span>{{child}}</span><br/><span>{{childA}}</span><br/><span>{{childB}}</span><br/><span>{{childC}}</span><br/><input type="text" :value="value" @input="changed" placeholder="please write something..."/></div>
</template>
<script lang="ts">
// InjectReactive
import { Component, Model, Vue, Emit, Inject, Prop } from 'vue-property-decorator'@Component
export default class Chlid extends Vue {// data 数据范畴// model 数据绑定 也属于data 数据范畴，属于本地成员变量数据// 获取父组件关于input输入框中 value变量的绑定值 model 绑定为动态双向绑定@Model('input') value!: boolean// props 数据范畴 !表示不需要构造器进行数据初始化// 必要参数 数据类型 字符串 或 数字 只读 单向同步数据,如果利用prop反向同步数据会报错@Prop({ type: [String, Number], required: true }) readonly child!: string | number// 非必须参数@Prop(Number) readonly childA!: number// 非必传参数，拥有默认值@Prop({ default: 'default value' }) readonly childB!: string// 非必传 需要构建器初始化 仅一个参数时默认为type@Prop([String, Boolean]) readonly childC: string | boolean | undefined// 转发input事件，动作名称叫input,parent中绑定名称也应交做input@Emit('input')// eslint对any类型警告，可以在package.json中关闭 也可以对指定地方关闭// eslint-disable-next-line @typescript-eslint/no-explicit-anychanged (event: any) {return event.target.value}
}
</script>

<!--* @FilePath: \hello-typescript\src\views\Parent.vue
-->
<template><div><h1>Parent</h1><Child v-model="content" @input="childChange" :child="content" :childA="childA" :childB="childB" :childC="childC"></Child><br/><p><b>Child 与 Parent 绑定的内容 => {{content}}</b></p></div>
</template>
<script lang="ts">
// ProvideReactive
import { Component, Vue, Provide } from 'vue-property-decorator'
import Child from '@/components/Child.vue'
@Component({components: {Child}
})
export default class Parent extends Vue {// data 范畴的数据// 一个组件只会有一个 v-modelcontent = '初始化内容'childA = 1childB = 'B'childC = true// methods// eslint-disable-next-line @typescript-eslint/no-explicit-anyprivate childChange (val: any, event: any) {window.console.log('val', val)window.console.log('event', event)// 非响应式数据this.msg = val// 修改propthis.childB = val}
}
</script>

Vue Typescript @Prop相关推荐

Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
vue-property-decorator vue typescript写法
什么是Typescript TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法.作者是安德斯大爷, Delphi ...
vue + typescript 父子组件传值记录
为什么80%的码农都做不了架构师?>>> typescript 使用 vue-property-decorator 插件后组件通信做一个记录 1. 父传子父: <s ...
Vue+TypeScript使用教程-快速入门
目前Vue CLI已经内置了TypeScript工具支持一.使用 TypeScript 创建工程 vue create vue-ts 选择Manually Select Features 然后选择自 ...
Vue—Typescript
Vue-cli推出了3.0,自带了Pwa和Typescript,尝试了下发现Typescript用起来十分方便,这里简单介绍下. 这次脚手架项目中用到了2个插件,vue-class-component ...
vue ts prop
a.vue 接收组件传过来的参数 @Prop() private viewPointData!: any; b.vue 定义: resData:any; 后台传过来的resData赋值给this.re ...
Vue.js Prop
Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camel ...
vue的Prop属性
转载自 Prop Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中 ...
vue组件 Prop传递数据
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...

Vue Typescript @Prop

Vue Typescript @Prop相关推荐

最新文章

热门文章