袁磊老师的课，VUE（六）

最新推荐文章于 2019-05-14 16:58:56 发布

赵俸堃是我的名字

最新推荐文章于 2019-05-14 16:58:56 发布

阅读量146

点赞数

分类专栏：前端基础袁磊老师的课 Vue 文章标签： vue component 前端

本文链接：https://blog.csdn.net/qq_43511842/article/details/90023885

版权

前端基础同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

Vue

8 篇文章 0 订阅

订阅专栏

一、 Vue组件Component
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码

第一步：创建组件：var component = Vue.extend(配置项)
第二步：注册组件：
①全局组件 Vue.component(组件名.component）
②局部组件：component：{‘组件名’：component}
template 要尽量跟着反引号·· （反引号在哪里？？ESC键子下面的键子就是了，和~键子是一个哦）
全局的组件一定要定义在new Vue（{}）的前面，不能是中间，也不能是后面
练习1
基础知识点都在代码的注释里啦~

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Component基础</title>
</head>
<style>
    .com {
        border: 1px solid pink;
        width: 300px;
        padding: 10px;
        margin: 10px;
        font-size: 30px;
        box-shadow: 5px 5px 5px peachpuff;

    }

    .dlist {
        border: 1px solid pink;
        padding: 10px;
        margin: 10px;
    }

    .tr-enter,
    .tr-leave-to {
        opacity: 0;
        transform: translateX(20px);
    }

    .tr-enter-to,
    .tr-leave {
        opacity: 1;
    }

    .tr-enter-active,
    .tr-leave-active {
        transition: all 0.6s;
    }
</style>

<body>
    <div id="app">
        <yuan></yuan>
        <yuan></yuan>

        <lei></lei>
        <lei></lei>
        <lei></lei>
    </div>

    <script src="vue.js"></script>
    <script>
        // 第一个参数是名字，第二个参数是这个组件对应拥有的属性
        Vue.component("yuan", {
            // 墙裂建议！template要用反引号，只有在反引号里面才可以加单双引号进行各种功能的添加
            // template中一定要有一个根元素,即只能有一个根元素，不能有很多并列的祖宗元素
            template: `<div class="com" @click="add">自定义组件 {{count}}</div>`,
            // 组件的数据一定要以函数的形式存在！！！
            data() {
                //！！！！！注意！！！！！ data的形式一定要以返回的形式给出来
                return {
                    count: 0
                    // 数据的调用，和正常的方式一样，双花括号就行
                }
            },
            // 上面template模板中有一个点击事件，就可以写在下面的methods中，和正常的书写方式一样
            methods: {
                add: function () {
                    this.count++;
                    // 当我们点击组件的时候，就加1
                }
            },
        })

        var vm = new Vue({
            el: "#app",
            // 局部组件
            components: {
                "lei": {
                    // 定义组件的时候，第一步是定义html元素，html元素要写在template之中
                    // 写transition-group的时候一定要绑定一个key，key是不同的值，key能够区别每个动画的不同
                    template: `
                    <div class="dlist" @click =""> 
                        <transition-group name = "tr">
                            <div v-for="(v,i) in dlist" :key="i">
                                <span>{{v.id}}</span>
                                <span>{{v.title}}</span>
                                <button @click="del(i)">删除</button>
                            </div>
                        </transition-group>
                    </div>`,
                    data: function () {
                        return {
                            dlist: [{
                                    id: 1,
                                    title: "这里是标题1"
                                },
                                {
                                    id: 2,
                                    title: "这里是标题2"
                                },
                                {
                                    id: 3,
                                    title: "这里是标题3"
                                },
                                {
                                    id: 4,
                                    title: "这里是标题4"
                                },
                            ]
                        }
                    },
                    methods: {
                        del(index) {
                            this.dlist.splice(index, 1);
                        }
                    },
                }
            }

        })
    </script>
</body>

</html>

二、父子组件
没在课上跟代码，所以笔记会少一点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue父子组件</title>
    <style>
        h2 {
            padding: 0;
            margin: 0;
        }

        .title {
            border-bottom: 2px solid #c00;
            height: 32px;
            line-height: 32px;
            width: 400px;
            position: relative;
        }

        .title h2 {
            text-indent: 18px;
            font-size: 14px;
            color: #c00;
        }

        .title a {
            text-decoration: none;
            color: #aaa;
            font-size: 14px;
            position: absolute;
            top: 5px;
            right: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>从子组件中获得的数据:{{msg}}</h2>
        <com link="0509zujian.html" @zdyevent="getmsg">新闻</com>
        <com link="http://baidu.com">娱乐</com>

    </div>
    <script src="vue.js"></script>
    <script>
        var template = `<div class="title"><h2 @click="send">
        <slot></slot></h2>
        <a :href="link">更多>></a>
        </div>
        `;

        Vue.component("com", {
            template,
            props: ['link'],
            methods: {
                send() {
                    this.$emit("zdyevent", "xxxxxx"); //xxxxxx是数据
                }
            },
        });

        new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                getmsg(val) {
                    this.msg = val;
                }
            }
        })
    </script>
</body>

</html>

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，VUE（六）

一、 Vue组件Component组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码第一步：创建组件：var component = Vue.extend(配置项)第二步：注册组件：①全局组件 Vue.component(组件名.component）②局部组件：component：{‘组件名’：component}template 要尽量跟着反引号...
复制链接

扫一扫

专栏目录