Vue基础实例二（组件）

最新推荐文章于 2023-02-08 22:14:27 发布

IT飞牛

最新推荐文章于 2023-02-08 22:14:27 发布

阅读量104

点赞数

文章标签： vue javascript dom html svg

本文链接：https://blog.csdn.net/bobo789456123/article/details/117252392

版权

本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。

本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。

注意：1、子组建模板中必须带有合法的根标签，不能直接写字符串2、调用组建时的原生js事件，会被转变成自组建的自定义事件。例如@click，就需要在自组建的methods中自定一个click

实例效果：

Vue基础实例二(组件).gif

代码：

代码中分别定义了全局组件和局部组件。全局组件：可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
深入了解请点击：组件注册

1、定义组件名时如果使用驼峰命名，则使用组件时需要将大写字母拆封成-分割字符串，例如：TudoList，则使用时需要<tudo-item :item="item" :index="index" @delitem="deleteItem($event)"></tudo-item>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello world</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .style1 {
            line-height: 150%
        }
    </style>
</head>

<body>
    <div id="app" class="style1">
        <ul v-for="(item,index) in lists">
            <tudo-item :item="item" :index="index" @delitem="deleteItem"></tudo-item>
            <!--等效于@delitem="deleteItem($event)"-->
        </ul>
        <input type="text" v-model="keyword">
        <button @click="addItem">添加</button>
    </div>
</body>

</html>

<script>
    // Vue.component("tudo-item", {
    //     props: ["item", "index"],
    //     template: '<li>{{item.id}}-{{item.name}} <font color="red" size="0" style=" cursor:pointer" @click="function(){deleteItem(index)}">X</font></li>',
    //     methods: {
    //         deleteItem: function (i) {
    //             this.$emit("delitem", i);
    //         }
    //     }
    // })

    var TudoItem = {
        props: ["item", "index"],
        template: '<li>{{item.id}}-{{item.name}} <font color="red" size="0" style=" cursor:pointer" @click="function(){deleteItem(index)}">X</font></li>',
        methods: {
            deleteItem: function (i) {
                this.$emit("delitem", i);
            }
        }
    };

    var app = new Vue({
        el: "#app",
        components: {
            "tudo-item": TudoItem
        },
        data: {
            keyword: "",
            lists: [
                { id: 1, name: "这是第一个" },
                { id: 2, name: "这是第二个" },
                { id: 3, name: "这是第三个" },
                { id: 4, name: "这是第四个" },
                { id: 5, name: "这是第五个" }
            ]
        },
        methods: {
            addItem: function (event) {
                this.lists.push({ id: this.lists.length + 1, name: this.keyword });
                this.keyword = "";
            },
            deleteItem: function (index) {
                this.lists.splice(index, 1);
            }
        }
    })

</script>

非父子组件传值：

假如有组件aaa和bbb，希望点击aaa中按钮，bbb能收到aaa中点击事件并接受传值。
其实就是在Vue原型链上添加一个bus属性，属性值是个Vue实例。那么在Vue实例中就可以使用bus的this.bus.$emit("事件名",值)、this.bus.$on("事件名",function(msg){...表达式...})，进行广播事件和监听事件。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello world</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .style1 {
            line-height: 150%
        }
    </style>
</head>

<body>
    <div id="app" class="style1">
        <aaa></aaa>
        <bbb></bbb>
    </div>
</body>

</html>
<script>
    Vue.prototype.bus = new Vue();

    var aaa = {
        template: '<button @click="clickA">点击组件aaa</button>',
        methods: {
            clickA: function () {
                this.bus.$emit("clickA", "组件A中点击事件传值");
            }
        }
    };
    var bbb = {
        template: '<span>{{content}}</span>',
        data: function () {
            return {
                content: ""
            }
        },
        mounted: function () {
            this.bus.$on("clickA", (msg) => {
                this.content = msg;
            })
        },
    };
    var app = new Vue({
        el: "#app",
        components: {
            "aaa": aaa,
            "bbb": bbb
        }
    })
</script>

slot父子组件传值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello world</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .style1 {
            line-height: 150%
        }
    </style>
</head>

<body>
    <div id="app" class="style1">
        <aaa>
            <div slot="header">header</div>
            <div slot="footer">footer</div>
        </aaa>
    </div>
</body>

</html>
<script>
    var aaa = {
        template:
            `<div>
                <slot name="header"></slot>
                <slot name="footer"></slot>
            </div>`,
    };
    var app = new Vue({
        el: "#app",
        components: {
            "aaa": aaa
        }
    })
</script>

动态组件：

<child-one v-if='type=="child-one"'></child-one>
<child-two v-if='type=="child-two"'></child-two>

等同于：

<component :is="type"></component>//根据is后面跟着的组件名，动态调用组件来显示

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello world</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .style1 {
            line-height: 150%
        }
    </style>
</head>
<body>
    <div id="app" class="style1">
        <child-one v-if='type=="child-one"'></child-one>
        <child-two v-if='type=="child-two"'></child-two>
        <!--<component :is="type"></component>-->
        <button @click="toggle">点击</button>
    </div>
</body>
</html>
<script>
    var childone = {
        template: `<div>child-one</div>`,
    };
    var childtwo = {
        template: `<div>child-two</div>`,
    };
    var app = new Vue({
        el: "#app",
        components: {
            "child-one": childone,
            "child-two": childtwo,
        },
        data: {
            type: "child-one"
        },
        methods: {
            toggle: function () {
                this.type = this.type == "child-one" ? "child-two" : "child-one";
            }
        }
    })
</script>

IT飞牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础实例二（组件）

本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。注意：1、子组建模板中必须带...
复制链接

扫一扫