Vue如何封装组件

Vue如何封装组件

想封装一个Vue组件来使用,大佬们有没得清楚易懂的例子。。。。


回答:

最近刚好接手一个vue前端项目,基本上是在边查文档边写代码,可以参考下面代码,希望可以帮到你

<template>

<div class="">

<demo />

</div>

</template>

<script>

// 导入组件: 组将路径可根据实际情况随意定义,一般情况下都放在 components下

import demo from './demo.vue'

export default {

data() {

return {}

},

components: {

// 加载组件

demo

},

}

</script>

<style scoped lang="scss"></style>

// 组件页面

<template>

<div class="">

this is components

</div>

</template>

<script>

export default {

data() {

return {}

},

components: {},

}

</script>

<style scoped lang="scss"></style>


回答:

1.新建xxx.vue
<template><div>...写页面....</div></template>
<script>
export default {
name:'School',
data(){},
methods:{},
}
</script>
<style></style>
2.使用
<template><div><School></School></div></template>
<script>
import School from './School'
export default{
name:'App',
components:{
School}
}
</script>

以上是 Vue如何封装组件 的全部内容, 来源链接: utcz.com/p/936510.html

回到顶部