Vue三大核心概念之一(属性)

1.自定义属性props:即组件中声明的属性,子类接受父类的值
2.原声属性attrs:没有声明的属性,默认自动挂在到组件根元素上,设置inheritAttrs为false能够关闭自动挂载
3.特殊属性class,style挂载到组件根元素上,支持字符串,对象,数组等多种语法.

定义属性的两种方式
1.props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’] 无法对属性值进行校验
2.可以对属性值进行校验

props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}

案例:

子组件

<template><div>name:{{name}}<br/>type:{{type}}<br/>list:{{list}}<br/>isView:{{isView}}<br/><button @click="handClick">change</button></div>
</template><script>
export default {//子组件的名称name:"Props",props:{name:String,type:{validator:function(val){return ["入门","小站","Rumenz"].includes(val)}},list:{type:Array,default:()=>[]},isView:{type:Boolean,default:false},onChange:{type:Function,default:()=>{}}},methods:{handClick(){this.onChange(this.type==="入门"?"one":"tow")}}}
</script><style></style>

父组件应用子组件

<template>
<div id="app">{{msg}}<!--属性绑定格式 :[自组件的属性]:[父组件的属性]--><Props :name="name":type="type":list="list":isView="view":onChange="onChange"/></div>
</template><script>
//导入子组件
import Props from './components/Props'export default {name: 'App',data() {return {msg: "hello 入门小站",name:"name",type:"入门",list:['入门','小站'],view:true}},methods: {onChange(val){this.name=val;}},components: {Props //必须声明子组件}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

源码:https://github.com/mifunc/rumenz-vue/tree/master/rumenz-vue-three-core

Vue三大核心概念之一(属性)相关推荐

Vue三大核心概念之二(事件)
1.普通事件 @click,@input,@change,@xxx等事件,经过this.$emit('xxx',-)触发写法案例: <div id="example-3"& ...
Vue组件三大核心概念
Vue的核心三大基础概念为:属性.时间和插槽.本文就这三个方面进行深入解析,来了解vue. 一.属性 1.自定义属性props props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种 ...
vue快速修改数组的某个值_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
vue warning如何去掉_详解 vue 组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...
vue传递数组对象_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
Vue三大核心之三(插槽)
1.具名组件我们一个组件里需要多个插槽,就需要用到slot的name属性  <div><header><slot name=&quo ...
docker 添加端口映射_Docker三大核心概念之容器
容器 1.新建容器 docker create命令创建一个容器,例如: docker create -it hello-world 使用docker create命令新建的容器处于停止状态.可以使用 ...
前端学习（2555)：vue的核心概念事件
docker三大核心概念
1. docker镜像(image) 镜像是创建docker容器的基础,docker镜像类似于虚拟机镜像,可以将它理解为一个面向docker引擎的只读模块,包含文件系统. 创建镜像有两种方法: (1) ...

Vue三大核心概念之一(属性)

案例:

Vue三大核心概念之一(属性)相关推荐

最新文章

热门文章