vue_组件_非prop特性

非prop特性指的是，一个未被组件注册的特性。当组件接收了一个非prop特性时，该特性会被添加到这个组件的根元素上。

1.替换/合并已有的特性

对于绝大多数特性来说，从外部供给组件的值会替换掉组件内部设置好的值，如【例1】

【例1】

<div id="app"><my-cmp type='radio'></my-cmp>
</div>

const vm = new Vue({el: "#app",components: {'my-cmp': {template: `<input type="text">`}}
})

【结果】

【注】class 和 style 特性会将两边的值合并起来，如【例2】

【例2】

<div id="app"><my-cmp class="b"></my-cmp>
</div>
<script>const vm = new Vue({el: "#app",components: {'my-cmp': {template: `<div class="a"></div>`}}})
</script>

【结果】

2.禁用特性继承

如果不希望组件的的根元素继承特性，那么可以在组件选项中设置 inheritAttrs: false ，如【例3】

<div id="app"><my-cmp type="radio"></my-cmp>
</div>
<script>const vm = new Vue({el: "#app",components: {'my-cmp': {template: `<input type="text"></input>`,inheritAttrs: false}}})
</script>

【结果】

该属性可以配合实例的 $attrs 属性使用，这个属性是一个对象，键名为传递的特性名，键值为传递的特性值

<div id="app"><my-cmp value="请输入用户名" label="用户名" type="text" v-on:input="print"></my-cmp>
</div>
<script>const vm = new Vue({el: "#app",components: {'my-cmp': {inheritAttrs: false,props: ['value', 'label','type'],template: `<label>{{ label }}<input v-bind="$attrs"v-bind:value="value"v-bind:type="type"v-on:input="$emit('input',$event.target.vlaue)"></input></label>`,}},methods: {print() { }}})
</script>

【结果】

【注】inheritAttrs：false 选项不会影响 style 和 class 的绑定

vue_组件_非prop特性相关推荐

vue_组件_监听组件事件
1.$emit 的使用在组件中注册自定义事件 $emit(事件名, 参数) //该参数会当作第一个参数传入绑定的函数中下面用一个菜单栏例子来说明,如下图所示组件 Vue.component ...
Vue_(组件通讯)非父子关系组件通信
Vue单项数据流传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
4-3 组件参数校验与非props特性
本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...
Vue学习小札——2.6 组件参数校验与非props特性
<div id="app"><child content="{'a':1}"></child></div>< ...
vue.js踩坑之组件参数检验与非props特性
vue组件参数检验与非props特性学前疑问: 什么是组件参数检验? 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码讲解如下: 父 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
vue3.0js 非prop属性的值和setup函数的使用
非prop属性的值一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute. 因为显式定义的 prop 适用于向一个子组件传入信息,然而 ...
React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...
pyqt 获取 UI 中组件_你想知道的React组件设计模式这里都有(上)
本文梳理了容器与展示组件.高阶组件.render props这三类React组件设计模式往期回顾:HBaseCon Asia 2019 Track 3 概要回顾随着 React 的发展,各种组件设 ...

vue_组件_非prop特性

1.替换/合并已有的特性

2.禁用特性继承

vue_组件_非prop特性相关推荐

最新文章

热门文章