Question

以下是自定义Web组件my-input的示例。我想将自定义输入组件的value属性绑定到vue实例的email属性。（该示例可能需要Chrome支持自定义Web组件。）

=＆gt;我如何调整我的Web组件示例以使绑定工作？

如果我使用普通my-input标记替换input，则绑定有效。因此，我对vue.js部分的语法似乎没问题。

 new Vue({
  el: '#app',
  template: '#app-template',
  data: {
  //email data is blank initially
    email: ''
  }
})

<script type="text/javascript" src="https://unpkg.com/vue@2.2.4"></script>

<script>
  class MyInput extends HTMLElement {

		static get observedAttributes() {
        return ['value'];
    }
    
    constructor(){
       super();
       this.wrappedInput=undefined;
    }

    connectedCallback(){
        var self=this;
        if(!self.wrappedInput){
            var wrappedInput = document.createElement('input');
            wrappedInput.type='text';
            wrappedInput.onchange = ()=>this.wrappedInputChanged();
            self.appendChild(wrappedInput);
            self.wrappedInput = wrappedInput;
        }
    }
    
    attributeChangedCallback(attr, oldValue, newValue) {
      if(attr==='value'){
          console.log('attribute changed ' + newValue);
          if(this.wrappedInput){
      	      this.wrappedInput.value= newValue; 
          }   
                                                 
      } 
    }
    
    wrappedInputChanged(){
      console.log('wrapepd input changed')
    	var newValue = this.wrappedInput.value;
      this.value = newValue;
    }
    
     get value() {
        console.log('get value')
				return this.getAttribute('value');
		}

	 set value(newValue) {	
    	this.setAttribute('value',newValue);     
      console.log('set value ' + newValue);
		}

  }
  window.customElements.define('my-input', MyInput);

</script>

<div id="app"></div>

<template id="app-template">
  <div>
  <my-input v-model="email"></my-input>
    <h1>
       You entered {{email}}
    </h1>
  </div>
  
</template>

我试图发送一个额外的输入事件，但这没有帮助：

     var myInput = new CustomEvent("input", 
        {
          detail: {
            message: "Hello World!",
            type: 'text',
          },
          bubbles: true,
          cancelable: true
        }
      );
      this.dispatchEvent(myInput);

在哪里可以找到v-model指令的源代码，以了解它的作用？

相关问题：

How to target custom element (native web component) in vue.js?

Answer 1

要使v-model工作，您需要为web组件创建一个包装器组件。包装器将符合requirements for using v-model with a component。

或者，您可以将v-model分解为两部分：设置value道具和处理input事件。就v-model而言，Vue似乎无法将web组件识别为本机元素。

＆＃13;

class MyInput extends HTMLElement {

  static get observedAttributes() {
    return ['value'];
  }

  constructor() {
    super();
    this.wrappedInput = undefined;
  }

  connectedCallback() {
    var self = this;
    if (!self.wrappedInput) {
      var wrappedInput = document.createElement('input');
      wrappedInput.type = 'text';
      wrappedInput.onchange = () => this.wrappedInputChanged();
      self.appendChild(wrappedInput);
      self.wrappedInput = wrappedInput;
    }
  }

  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr === 'value') {
      console.log('attribute changed ' + newValue);
      if (this.wrappedInput) {
        this.wrappedInput.value = newValue;
      }
    }
  }

  wrappedInputChanged() {
    var newValue = this.wrappedInput.value;
    this.value = newValue;
  }

  get value() {
    console.log('get value')
    return this.getAttribute('value');
  }

  set value(newValue) {
    this.setAttribute('value', newValue);
    console.log('set value ' + newValue);
  }

}

window.customElements.define('my-input', MyInput);

new Vue({
  el: '#app',
  template: '#app-template',
  data: {
    //email data is blank initially
    email: ''
  },
  methods: {
    handleInput(event) {
      this.email = event.target.value;
    }
  },
  components: {
    wrappedMyInput: {
      template: '#wmi-template',
      props: ['value'],
      methods: {
        emitInput(event) {
          this.$emit('input', event.target.value);
        }
      }
    }
  }
})

＆＃13;

<script type="text/javascript" src="https://unpkg.com/vue@2.2.4"></script>

<div id="app"></div>

<template id="app-template">
  <div>
    <my-input :value="email" @input="handleInput"></my-input>
    <h1>
       You entered {{email}}
    </h1>
    <wrapped-my-input v-model="email"></wrapped-my-input>
    <h1>
       You entered {{email}}
    </h1>
  </div>
</template>

<template id="wmi-template">
  <my-input :value="value" @input="emitInput"></my-input>
</template>

＆＃13;

Answer 2

v-model指令似乎检查标记的类型并单独处理它们：

https://github.com/vuejs/vue/blob/dev/src/platforms/web/compiler/directives/model.js

我没有让v-model为我的自定义组件工作而没有额外的包装器。（我放弃了解我的案例在model.js中的处理方式。）

作为Roy J建议的“分解结合”的替代方法。

<my-input :value="email" @input="email = $event.target.value"></my-input>

我创建了一个自定义指令v-property。它适用于my-input和input（在我的原始示例中使用;未尝试所有可能的情况）：

<my-input v-property="email"></my-input>
<input v-property="email"></my-input>

-

Vue.directive('property', { 
  bind: function (el, binding, vnode) {
    var viewModel = vnode.context;
    var propertyName = binding.expression;
    el.addEventListener('input', (event)=>{ 
      var oldValue = viewModel[propertyName];
      var newValue = event.target.value;
      if(newValue != oldValue){
        viewModel[propertyName] = newValue;        
      }     
    });    

    viewModel.$watch(propertyName, ()=>{
      var oldValue = el.value;
      var newValue = viewModel[propertyName];
      if(newValue != oldValue){
        el.value = newValue;        
      } 
    });

  }
});

https://jsfiddle.net/7dqppqo2/

如何创建从vue.js实例到自定义本机Web组件的双向绑定？

2 个答案: