vue组件中prop属性

Vue组件prop属性

prop大小写

单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。

在组件中修改 prop 传递过来的数据 Vue 会发出警告，所以有两种常见的用法去修改 prop 传递过来的值

本地定义属性，并将 prop 作为初始值
prop 传入之后需要进行转换，这种情况使用 computed 来定义
prop验证

<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {props: {// 基础的类型检查 (`null` 匹配任何类型)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}}},data() {return {}},template: `<div>{{propD}}{{propE}}</div>`
})

type可以是下列原生构造函数中的一个：
String，Number，Boolean，Array，Object，Date，Function，Symbol
非prop特性
非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上

<style>
.colorRed {color: red;
}.defineSize {font-size: 20px;
}
</style>
<!-- 非prop属性 -->
<test-not-prop class="colorRed" my-self-define></test-not-prop>
Vue.component('test-not-prop', {data() {return {}},template: `<div style="font-weight:bold;" class="defineSize">Test Not Prop</div>`
})
<!-- 渲染为 -->
<div class="defineSize colorRed" my-self-define="" style="font-weight: bold;">Test Not Prop</div>

对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：defineSize colorRed。

总结

prop 数据单项传递，父影响子，子不影响父
不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告
prop 验证时，会在实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或
validator 函数中是不可用的
非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上

vue组件中prop属性相关推荐

vue组件之Prop属性
一般页面元素是有属性的,如a标签有href等属性,同样Vue中组件也是有属性的.在Vue组件中想要使用属性,首先需要在组件内部定义一些属性,这些属性在Vue中被为prop,在组件中通过props选项中 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
Vue 组件(二)——Prop
四.Prop 在组件的使用过程中,经常会遇到需要向子组件传递数据的情况,这个时候就需要用到 prop来自定义属性传值了. prop概念: prop属性其实是一个对象,在这个对象里可以定义一些数据,而这 ...
在 vue 组件中查看 vuex 定义
原文:在 vue 组件中查看 vuex 定义在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性.但是在 vue 组件中引用这些 vue ...
vue组件传值 prop传递对象
vue组件传值 prop传递对象大家经常会使用组件传值,今天我用到的时候突然遇到了一些坑,想着今天来记录一下,大家做一个参考,此篇仅说一下prop传递对象. 子组件接收基本的数据类型子组件 < ...
vue组件中的data为什么是一个函数
一.总结 1.vue中组件是用来复用的,为了防止data复用,将其定义为函数. 2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处 ...
Vuex---在 Vue 组件中获得 Vuex 状态state
Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个 ...
Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...

vue组件中prop属性

Vue组件prop属性

vue组件中prop属性相关推荐

最新文章

热门文章