如何实现Vue.js实例与自定义原生Web组件my-input的双向绑定？

嗨，我来帮你搞定这个双向绑定的问题！其实核心原因是原生<input>已经内置了Vue双向绑定所需的事件和属性机制，但你的自定义组件需要手动实现这些逻辑才能和Vue配合工作。下面是具体的修改方案：

自定义Web组件需要满足的两个关键条件 #

Vue的v-model双向绑定本质上是语法糖：它会监听组件的input事件，同时把绑定的值同步到组件的value属性。所以你的my-input组件需要做到：

• 当内部输入值变化时，向外派发input事件
• 当组件的value属性被外部修改（比如Vue更新）时，同步更新内部输入框的值

修改后的自定义组件代码 #

class MyInput extends HTMLElement {
  constructor() {
    super();
    // 创建shadow DOM和内部input
    const shadow = this.attachShadow({ mode: 'open' });
    this.input = document.createElement('input');
    shadow.appendChild(this.input);

    // 监听内部input的输入事件，同步到组件并派发input事件
    this.input.addEventListener('input', (e) => {
      this.value = e.target.value;
      this.dispatchEvent(new CustomEvent('input', { 
        detail: this.value,
        bubbles: true,
        cancelable: true
      }));
    });
  }

  // 声明需要监听的属性，让Vue的属性更新能触发组件内部变化
  static get observedAttributes() {
    return ['value'];
  }

  // 当value属性变化时，同步更新内部input的值
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'value' && this.input) {
      this.input.value = newValue || '';
    }
  }

  // 组件挂载到DOM时，初始化内部input的值
  connectedCallback() {
    this.input.value = this.getAttribute('value') || '';
  }

  // 定义value属性的getter和setter，方便外部操作
  get value() {
    return this.getAttribute('value');
  }

  set value(newValue) {
    this.setAttribute('value', newValue);
  }
}

// 注册自定义组件
customElements.define('my-input', MyInput);

Vue部分的代码保持不变即可 #

<div id="app">
  <my-input v-model="email"></my-input>
  <p>绑定的值: {{ email }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    email: ''
  }
});
</script>

关键修改点解释 #

• observedAttributes: 声明value为需要监听的属性，这样当Vue更新组件的value属性时，会触发attributeChangedCallback，同步更新内部输入框。
• input事件派发: 内部输入框的输入事件触发时，先更新组件的value属性，再向外派发标准的input事件，让Vue能捕获到这个变化并更新email数据。
• 属性的getter/setter: 简化外部对组件value属性的操作，确保属性修改能同步到DOM属性。

这样修改后，你的my-input组件就能和Vue的v-model完美实现双向绑定了，和原生input的表现一致~

内容的提问来源于stack exchange，提问作者Stefan