Bootstrap

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>






在这里插入图片描述

;