Vue 中自定义封装组件

以下内容为自定义封装的一个小button按钮,这种自定义组件最好是放在components 文件夹下面

<template>
  <div>
      <button>牛</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style  scoped>

</style>

``











## 以下为用到自定义标签VUE文件中的代码

<template>
  <div>
        自定义封装组件小案例 :
        <my-button></my-button>
  </div>
</template>

<script>
  //  anniu 是随便起的变量名字    后面是引入的路径
  import  anniu  from "@/components/Button.vue"
// 下面这个my-button 就是自定义标签的名字,自己可以随意修改
export default {
  components: {
       "my-button" : anniu
  },
  
};
</script>

<style  scoped>

</style>
上一篇:VUE开发者必须知道的实用技术点!


下一篇:使用Painter 画板生成自定义海报