不可观察的变化

Question

测试-element.html

house:{ type: String, notify: true}

A.html

<test-element house="my-house"></test-element>

B.html

<test-element house="{{house}}"></test-element>
<div>{{house}}</div>

为什么 <div>{{house}}</div> 不是 my-house？

Answer 1

因为test-element是不同的实例。 A.html 中的一个元素与 B.html 中的元素不同，尽管它们具有相同的定义。

在 javascript 方面，您可以将其与声明调用同一函数两次进行比较：

function a(prop1) {
  console.log(prop1);
}

a(1) //logs 1
a() //logs undefined

或者，如果您想将它与 HTML 进行比较，您可以以任何元素为例（比如说输入）

<input id="ip1" value="test">
<input id="ip2">

现在，如果您检查 ip2 的值，它不会是 test，因为它是一个新实例。 custom-elements 也会发生同样的事情。

Answer 2

自定义元素不是单例！组件的每个实例都有自己的上下文。如果你想让它表现得像一个单例，你需要实现 redux or use localStorage 来存储信息

Unobservable changes