1个回答
test
2024-06-29
组件test.js
写法
const { createApp, ref, reactive, nextTick, onMounted, onUpdated, onBeforeUnmount, toRefs } = Vue;
export default {
emits: ['clicked'],
props: ['title'],
setup(props, ctx) {
const count = ref(0);
console.log('props', props.title);
const clickComponent = () => {
ctx.emit('clicked');
}
return { count, clickComponent }
},
template: '#component'
// template: `<div>11111</div>`
}
然后在main.js
中引入 import Component from './test.js'
全局注册 App = createApp({})
App.component('Component', Component);
App.mount('#App');html
页面中使用
<div class="App" id="App" v-cloak>
<Component @clicked="clicked" title="Why Vue is so fun">
<div>11111</div>
</Component>
</div>
<template id="component">
<div @click="clickComponent">
<slot></slot>
<slot></slot>
</div>
</template>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容