Javascript 模版和#x27；无法将数据发送到Vue实例_Javascript_Vue.js_Vuejs2_Stenciljs

Javascript 模版和#x27；无法将数据发送到Vue实例

javascript vue.js vuejs2

Javascript 模版和#x27；无法将数据发送到Vue实例,javascript,vue.js,vuejs2,stenciljs,Javascript,Vue.js,Vuejs2,Stenciljs,我正在尝试使用带有输入的模具创建自定义组件。我的意图是用输入来制作组件。更改输入值后，它应将其发送到我的Vue实例，并将此事件记录在控制台日志中（稍后它将更新Vue实例中的值）。但在更改模具中的输入值后，什么也不会发生了解模具组件的工作原理我使用了：尝试解决问题我也尝试过： HTML和Vue代码： <!DOCTYPE html> <html dir="ltr" lang="en"> <head> &l

我正在尝试使用带有输入的模具创建自定义组件。我的意图是用输入来制作组件。更改输入值后，它应将其发送到我的Vue实例，并将此事件记录在控制台日志中（稍后它将更新Vue实例中的值）。但在更改模具中的输入值后，什么也不会发生

了解模具组件的工作原理我使用了：

尝试解决问题我也尝试过：

HTML和Vue代码：

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="module" src="/build/vox-wc-research.esm.js"></script>
    <script nomodule src="/build/vox-wc-research.js"></script>
  </head>
  <body>
    <div id="app">
      <test-component :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
      {{value}}
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        label: 'Nazwa Użytkownika',
        value: '',
        placeholder: 'Wpisz nazwę użytkownika',
      },
      methods: {
        onValueChange(e) {
          console.log(e);
        },
      },
    });
  </script>
</html>


模板元件起动器
{{value}}
var app=新的Vue({
el:“#应用程序”，
数据：{
标签：“Nazwa Użytkownika”，
值：“”，
占位符：“Wpisz nazwęużytkownika”，
},
方法：{
onValueChange（e）{
控制台日志（e）；
},
},
});

模板组件：

import { h, Component, Element, Event, EventEmitter, Prop /* PropDidChange */ } from '@stencil/core';
@Component({
  tag: 'test-component',
  styleUrl: 'test-component.css',
  //shadow: true,
})
export class FormInputBase {
  @Element() el: HTMLElement;
  @Prop() type: string = 'text';
  @Prop() label: string;
  @Prop() placeholder: string;
  @Prop({ mutable: true }) value: string;
  @Event() valueChange: EventEmitter;

  handleChange(event) {
    const val = event.target.value;
    console.log(val);
    this.value = val;
    this.valueChange.emit(val);
  }
  render() {
    return (
      <div>
        <label>
          {this.label}
          <div>
            <input placeholder={this.placeholder} value={this.value} onInput={event => this.handleChange(event)}></input>
            {this.value}
          </div>
        </label>
      </div>
    );
  }
}

从'@stencil/core'导入{h，组件，元素，事件，事件发射器，Prop/*PropDidChange*/}；
@组成部分({
标记：“测试组件”，
styleUrl:'test component.css'，
//影子：没错，
})
导出类FormInputBase{
@Element（）el:HTMLElement；
@Prop（）类型：string='text'；
@Prop（）标签：字符串；
@Prop（）占位符：字符串；
@Prop（{mutable:true}）值：字符串；
@Event（）值更改：EventEmitter；
手变（活动）{
const val=event.target.value；
控制台日志（val）；
this.value=val；
this.valueChange.emit（val）；
}
render（）{
返回(
{this.label}
this.handleChange（事件）}>
{this.value}
);
}
}

Vue不支持驼峰大小写事件名称，因为所有

v-on:

事件侦听器都转换为小写（请参阅）

但是，当您加载组件时，可以使用模具的

定义组件

选项“转换”所有事件名称：

import { applyPolyfills, defineCustomElements } from 'my-component/loader';

applyPolyFills().then(() => {
  defineCustomElements({
    ce: (eventName, opts) => new CustomEvent(eventName.toLowerCase(), opts)
  });
});

有关更全面的示例，请查看Ionic Framework的源代码：

它可以工作-此外，我必须将

@valueChange=“e=>onValueChange”

更改为

@valueChange=“（e）=>onValueChange（e）”

或

@valueChange=“onValueChange”

，现在它可以正常工作了。啊，是的，我在你的代码中遗漏了这一点，

e=>onValueChange

实际上并不调用

onValueChange

函数，只返回函数引用。