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