Web|Web Components 中属性在Vue和React中的不同表现
attribute 和 property
总结：DOM property、DOM attribute区别导致自定义标签在 Vue、React 中使用时表现不一，核心思路是做好映射关系。
React中使用 WCs 标签：
const App = () => Cell export default App;
不会走到WCs的
set，因为传递的是 property。且以上传递的是一个字符串。class MyCell extends HTMLElement {
...
get desc() {
return this.getAttribute('desc');
}
+ set desc(value) {
+// 不会走到这里
+this.setAttribute('desc', value);
+ }
...
}Vue中使用 WCs 标签：
Cell
会走到
set，Vue 中 desc 表示传递的是 attribute。class MyCell extends HTMLElement {
...
get desc() {
return this.getAttribute('desc');
}
+ set desc(value) {
+// 与React不同，Vue项目中使用会走到这里
+this.setAttribute('desc', value);
+ }
...
}如何解决？
为了兼容 WCs 在 React 和 Vue 项目中使用一致性，需要在 WCs 内部去绑定
this属性connectedCallback() {
+this.desc = this.desc;
// attribute -> property 映射
}布尔值属性传递 自定义一个标签
Vue
Cell 上面属性传的是类型是
string 字符串如果这样传：
Cell 【Web|Web Components 中属性在Vue和React中的不同表现】上面属性传递的类型是
boolean 布尔值React
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理