js封装vue组件
js文件button-counter.js
import Vue from 'vue';
// 定义 blog-post 组件
const BlogPostComponent = Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
});
export default BlogPostComponent;
vue使用
<template>
<div class="container">
<blog-post title="大得"></blog-post>
</div>
</template>
<script>
import BlogPostComponent from './js/button-counter';
export default {
components: {
"blog-post":BlogPostComponent
},
data() {
return {
list: []
}
}
}
</script>
<style scoped>
.container {
height: 300px;
border: 1px solid #ccc;
}
</style>
