如何定义组件的函数 #13
如何定义组件的函数
#13
Replies: 2 comments 1 reply
-
|
在事件绑定的文档里说 |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
😂 抱歉某些描述让你误解它的意思了， <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试组件2</title>
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.16/dist/ofa.min.js"></script>
</head>
<body>
<l-m src="./test-comp.html"></l-m>
<l-m src="./test-comp-two.html"></l-m>
<test-comp id="t1"></test-comp>
<br />
<test-comp id="t2"></test-comp>
<br />
<test-comp-two id="t3"></test-comp-two>
<script>
setTimeout(() => {
console.log("t1 add", $("#t1").add); // => add function
console.log("t2 add", $("#t2").add); // => add function
console.log("t3 add", $("#t3").add); // => undefined
console.log($("#t1").add === $("#t2").add); // true
}, 100);
</script>
<script>
const fun = () => {
$("#t1").add();
if ($("#t1").count < 110) {
setTimeout(fun, 300);
}
};
setTimeout(fun, 300);
</script>
</body>
</html><!-- test-comp.html -->
<template component>
<style>
:host {
display: block;
padding: 8px;
border: red solid 1px;
}
</style>
<div>count: {{count}}</div>
<button on:click="add">Add</button>
<script>
export default {
tag: "test-comp",
data: {
count: 100,
},
proto: {
add() { // add function
this.count++;
},
},
};
</script>
</template><!-- test-comp-two.html -->
<template component>
<style>
:host {
display: block;
padding: 8px;
border: blue solid 1px;
}
</style>
<div>count: {{count}}</div>
<script>
export default {
tag: "test-comp-two",
data: {
count: 200,
},
};
</script>
</template>同为 |
Beta Was this translation helpful? Give feedback.
-
|
附上案例文件。 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
看说明
proto是在原型上定义，所有组件都可以使用，那如何在组件内定义私有方法？Beta Was this translation helpful? Give feedback.
All reactions