如何从 Vue 实例外部触发 Stencil 组件功能/方法
Posted
技术标签:
【中文标题】如何从 Vue 实例外部触发 Stencil 组件功能/方法【英文标题】：How to trigger Stencil component function/method from outside Vue instance 【发布时间】：2021-05-16 07:43:32 【问题描述】：是否有可能从父级 Vue 实例触发 Stencil 组件功能？
例如，我想在 Vue 实例中运行 callChild() 方法，这将触发 Stencil 组件中的 doSomething()。
main，带有vue代码文件的html文件，其中包含stencil组件：
<body>
<div id="app">
<test-component :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
value
<button @click="foo()">Test</button>
</div>
</body>
<script>
var app = new Vue(
el: '#app',
data()
return
label: 'Nazwa Użytkownika',
value: '',
placeholder: 'Wpisz nazwę użytkownika',
required: v => !!v || 'This field is required',
passwordRule: v => v.length >= 8 || 'Your password is too short',
;
,
methods:
callChild()
//this function should trigger bar() function in stancil <test-component>
,
onValueChange(e)
console.log(e);
,
,
);
</script>
模板组件代码：
import h, Component, Element, Event, EventEmitter, State, Watch, Prop, Method 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() rules: Array<Function>;
@Prop() placeholder: string;
@Prop( mutable: true ) value: string;
@Prop() hidedetails: boolean;
@Event() valueChange: EventEmitter;
@State() errorDetails: any;
@State() showError: boolean = false;
@Watch('value')
watchHandler(newValue: string, oldValue: string)
console.log('The new value of activated is: ', newValue, 'Old val: ', oldValue);
console.log(this.required(newValue));
if (this.required(newValue) != true)
this.errorDetails = this.required(newValue);
this.showError = true;
else
this.showError = false;
console.log(this.rules);
required = v => !!v || 'This field is required';
@Method()
async testClick(val)
await console.log(val);
@Method()
doSomething()
//do something
handleChange(event)
const val = event.target.value;
console.log(val);
this.value = val;
this.valueChange.emit(val);
render()
if (this.hidedetails)
return (
<div>
<label>
this.label
<div>
<input placeholder=this.placeholder value=this.value onInput=event => this.handleChange(event)></input>
</div>
</label>
</div>
);
else
return (
<div>
<label>
this.label
<div>
<input placeholder=this.placeholder value=this.value onInput=event => this.handleChange(event)></input>
<div class="error-details">
<div class=this.showError ? 'text-active' : 'text-inactive'>this.errorDetails</div>
</div>
<button onClick=this.testClick>Kilknij mnie!</button>
</div>
</label>
</div>
);
【问题讨论】：
【参考方案1】：好的 - 答案很简单。您需要使用参考。只需将 ref 标签添加到 html 中的元素：
<test-component ref="form" :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
然后 Vue 方法应该是这样的：
foo()
this.$refs.form.bar();
,
其中 bar() 正是您的 Stencil 组件中方法的名称。
【讨论】：
您好，我正在尝试在 vue3 项目中使用由 stencil 构建的 Web 组件。但它不起作用。你能告诉我如何设置吗？以上是关于如何从 Vue 实例外部触发 Stencil 组件功能/方法的主要内容，如果未能解决你的问题，请参考以下文章