Vue基础组件的基本使用和注意事项

最新推荐文章于 2022-07-18 10:01:19 发布

雷电法王蚊香

最新推荐文章于 2022-07-18 10:01:19 发布

阅读量1k

点赞数 3

分类专栏： Vue 文章标签： vue.js html javascript es6

本文链接：https://blog.csdn.net/m0_47965154/article/details/106626669

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Vue基础组件的基本使用

什么是组件呢？

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。

开始使用
创建自定义组件的是Vue.component方法。

注意！！！ 方法后面第一个值是标签名，第二个是一个对象，里面定义的是data属性，这里的data属性不可以和Vue实例一样是对象，必须是函数，用return返回值，如果是对象会直接报错。

组件标签名命名方式有两种：

1.驼峰命名：列：ButtonCounter, 尽量使用驼峰命名，但是渲染时要注意用短横线渲染，不要用驼峰，代码如下：

<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
</body>

2.短横线名命：列：button-counter

<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
</body>

<script>
    // 创建自定义组件 
    Vue.component('ButtonCounter',{
        data:function () {
            return {
            count:0
            }
        },
        // template:`
        // <div>
        // <button @click="add">点击了{{ count }}次</button>
        // </div>
        // `,
        template:"<div><button @click='add'>点击了{{ count }}次</button></div>",
        methods:{
            add() {
                this.count += 1
                console.log(this.count)
            }
        }
    })
        var vm = new Vue({
        el:'#app',
        data:{}
    })

组件模板的方法有两种：

1.默认方法：直接用双引号包裹起来

<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
</body>
        template:"<div><button @click='add'>点击了{{ count }}次</button></div>"

2.模板字符串方法：直接用反引号包裹起来（ES6的语法），可读性比较强，比较直观，简洁。

<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
</body>
         template:`
         <div>
         <button @click="add">点击了{{ count }}次</button>
         </div>
         `

注意：
1.渲染模板不管别的，先把div写好，防止出错
2.组件模板的内容必须是单个跟元素，

在组件里可以定义方法methods，我这边定义了一个点击事件的方法，让他每次点击都加 1

	  methods:{
            add() {
                this.count += 1
                console.log(this.count)
            }
        }

注意：methods是定义在组件方法里，不是定义在Vue实例中

渲染到页面：直接把定义好的标签名放到Vue定义的标签里面，就行，这边的组件是可以重用的，而且每一个组件都是一个实例，是独立的，相互不影响。

    <div id="app">
        <button-counter></button-counter>
        <br>
        <button-counter></button-counter>
        <br>
        <button-counter></button-counter>
        <br>
    </div>