vue自定义组件

最新推荐文章于 2025-03-19 09:51:30 发布

zhan_lijian

最新推荐文章于 2025-03-19 09:51:30 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： JS vue

本文链接：https://blog.youkuaiyun.com/zhan_lijian/article/details/89524543

JS 同时被 2 个专栏收录

44 篇文章

订阅专栏

vue

25 篇文章

订阅专栏

本文详细介绍了在Vue.js中创建组件的三种方法：通常写法、使用Vue.extend()的拓展方式以及组合方式。通过具体代码示例，展示了如何定义组件的数据、模板和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通常写法

// 通常写法

Vue.component("counter",{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
	data:function(){
			return {count:0}
			},
 
//template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
	template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>'
})

2.拓展方式 `Vue.extend()`是Vue构造器的扩展

        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
        Vue.component('my-component', myComponent)

3.组合方式

Vue.component('ab-custom-form', {
    name: 'customForm',
    mixins: [custFormComponentMixin],
    template: html,
    data: function() {
      return custComponentData
    },
    methods: custFormMethods,
    mounted: function() {},
    components: {
      userDynamic: {
        name: 'userDynamic',
        data: function() {
          return {}
        },
        template: '<div>312545自定义指令</div>'
      }
    }
  })