Vue_定义简单的组件

Heroman_

已于 2022-04-21 09:33:27 修改

阅读量1.0k

点赞数 1

文章标签： vue.js 前端

于 2022-04-18 23:33:14 首次发布

本文链接：https://blog.csdn.net/m0_53077733/article/details/124262621

版权

Vue_定义简单的组件

首先，我们来了解一下，什么是组件呢？

组件------是可复用的Vue实例。是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

我们来定义一个简单的组件

1、全局组件注册

<body>
    <div id="main">
        <a>计数器</a><br>
        <component-one></component-one>
    </div>
</body>

<script>
    //定义简单的组件(组件的定义:可复用的实例)
    Vue.component("component-one", {
        data() {
            return {
                count: 0
            };
        },
        template: '<button @click="count++">{{count}}</button>',
    });

    let main = new Vue({
        el: "#main",
    })
    
</script>

1.首先，在html中,新建一个id为’main’的div;

2.在js中，我们定义一个名字为component-one的组件，component（“组成部分”的意思），在这个组件中写一个data的方法，在这个方法中返回count为0;

3.template("模板"的意思)，在这个模块中写入组件的内容，即此例中html的button标签;

4.最后，定义一个新的Vue实例, 用el绑定组件的父元素main

这样，一个简单的计数器就通过组件生成好了

2、局部组件注册

<body>
    <div id="main">
        <component></component>
    </div>
</body>

const component = {
  data() {
    return {}
  },
  template: "<p>我是局部注册的组件</p>"
}
new Vue({
  el: '#main',
  data: {},
  // 局部注册组件
  components: {
    component
  }
})