对Vue自定义组件的理解（附上学习代码）

指尖上的DEBUG

于 2020-08-15 11:07:55 发布

阅读量249

点赞数

分类专栏： Web前端文章标签： vue html5 vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46284353/article/details/108019603

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue自定义组件

在学习web前端的时候，不知道你是否发现，有时候你会有一组html结构的代码，并且这个上面可能还绑定了事件，然后这段代码可能有多个地方都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的，这样比较麻烦。

联想到学习python函数部分，我们可以对具有某一功能的一些代码进行封装形成函数，在需要的时候随时调用。那么这时候我们就可以把这些html代码封装成一个组件，因为组件是可复用的Vue实例，以后在使用的时候就跟使用普通的html元素一样，拿过来用就可以了。（***另外需要注意的是：自定义组件中的data必须为一个函数！（在下面的基本使用案例中有体现）***）

1、基本使用案例

下面我们创建了一个叫做button-counter的组件，这个组件实现了能够记录点击了多少次按钮的功能。后期如果我们想要使用，就直接通过button-counter使用就可以了。

自定义组件

2、子组件事件和传递事件到父组件

子组件中添加事件跟之前的方式是一样的，然后如果发生某个事件后想要通知父组件，那么可以使用this.$emit函数来实现。请看如下例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件绑定事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 给子组件绑定属性novel，属性值为book；绑定事件liu，触发事件执行父组件的方法checkChanged() -->
        <whpython v-for="book in books" :novel="book" @liu="checkChanged"></whpython>

        <h3>选中的内容为:</h3>
        <!-- 采用v-for循环将选中的结果一一显示在页面上 -->
        <div v-for="se in selected_books" :style={color:'red'}>{{ se.title }}</div>
    </div>

    <!-- 子组件里面的模板（在页面上展示的模样） -->
    <template id='temp'>
        <div>
            <span>{{ novel.title }}</span>
            <input type="checkbox" @click="yourCheck"/>
        </div>
    </template>

    <script type="text/javascript">
        // 子组件(whpython)
        Vue.component("whpython", {
            // 通过prop给子组件添加属性(novel)
            props: {
                novel: {
                    type: Array,
                    required: true,
                }
            },
            template:'#temp',
            // 子组件的方法yourCheck()
            methods: {
                yourCheck() {
                    //使用this.$emit()函数将选中的子组件对象(this.novel)传给父组件的方法checkChanged,作为其参数
                    this.$emit("liu", this.novel) 
                }
            }
        })

        // 主组件
        new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        id: 1,
                        title: '三国演义',
                    },
                    {
                        id: 2,
                        title: '西游记',
                    },
                    {
                        id: 3,
                        title: '红楼梦',
                    },
                    {
                        id: 4,
                        title: '水浒传',
                    },
                ],
                selected_books: []  //定义一个数组selected_books用来存储选中的结果
            },
            // 主组件的方法checkChanged()，主要实现功能：将子组件选中的图书保存在主组件的属性selected_books中
            methods: {
                checkChanged(book) {
                    // 思路：如果选中的图书已经存在于selected_books中,就先将其删除再添加，如果不存在index=-1，就直接添加
                    let index = this.selected_books.indexOf(book)
                    if (index >= 0) {
                        this.selected_books.splice(index, 1)
                    } else {
                        this.selected_books.push(book)
                    }
                }
            }
        })
    </script>
</body>
</html>

指尖上的DEBUG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对Vue自定义组件的理解（附上学习代码）

Vue自定义组件在学习web前端的时候，不知道你是否发现，有时候你会有一组html结构的代码，并且这个上面可能还绑定了事件，然后这段代码可能有多个地方都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的，这样比较麻烦。联想到学习python函数部分，我们可以对具有某一功能的一些代码进行封装形成函数，在需要的时候随时调用。那么这时候我们就可以把这些html代码封装成一个组件，因为组件是可复用的Vue实例，以后在使用的时候就跟使用普通的html元素一样，拿过来用就
复制链接

扫一扫

专栏目录