vue 道具的原生修改器

41ik7eoe  于 2022-10-28  发布在  其他
关注(0)|答案(6)|浏览(225)

此功能可解决什么问题?

请考虑以下组件

<template>
 <div>
  {{title}}
 </div>
</template>

<script>
export default {
name: 'awesomeTitle',
props: {
title: String
}
}
</script>

使用此组件时,现在无法在div上设置title html属性

<awesomeTitle title="Hello world" title.native="Oopsy"/>

这只会输出

<div title.native="Oopsy">Hello world</div>

而不是

<div title="Oopsy">Hello world</div>

为props添加native修饰符将允许避免html属性和vue props之间的冲突。
它已经存在于事件侦听器中,因此它也将更加一致。
有时库会忘记html属性继承是一件事,在那些组件中添加一些html属性变得不可能,这也会使组件更能适应未来的需求,以防在规范中添加新的html属性,因为你不必再担心未来的冲突

建议的API是什么样子的?

<awesomeTitle title="Hello world" title.native="Oopsy"/>
qf9go6mv

qf9go6mv1#

当你想允许一个属性时,使用一个与该属性同名的属性是令人困惑的。但我认为这值得通过RFC来收集反馈:https://github.com/vuejs/rfcs的最大值

w1e3prcc

w1e3prcc2#

.prop似乎可以工作,但仅限于绑定,不确定是否是预期的
https://codepen.io/jkarczm/pen/rNeLyLG?editors=1010的最大值

ckx4rj1h

ckx4rj1h3#

@jacekkarczmarczyk很肯定这不是,只是一个奇怪的副作用,但至少这个问题得到了一个非常黑客的工作区现在

xwbd5t1u

xwbd5t1u4#

@jacekkarczmarczyk道具的修饰符似乎只适用于绑定,而不是普通属性,似乎是一个bug,在这种情况下,这个问题可以使用显然已经存在的道具修饰符来解决

q9rjltbz

q9rjltbz5#

prop修饰符并不是一种技巧,它可以处理具有等价属性的属性

vd2z7a6w

vd2z7a6w6#

@posva我的意思是,它只适用于绑定,所以你必须使用引号和单引号

相关问题