组件

最新推荐文章于 2023-07-12 21:54:32 发布

tjh0001

最新推荐文章于 2023-07-12 21:54:32 发布

阅读量289

点赞数

分类专栏：知识点回顾

本文链接：https://blog.csdn.net/qq_39748755/article/details/99411743

版权

知识点回顾专栏收录该内容

60 篇文章 0 订阅

订阅专栏

一、全局组件

使用语法：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
    //组件内容写这里
    template:"<button>按钮计数器</button>",
})

//全局组件写在new Vue({})实例之前

调用：

<button-counter></button-counter>

归纳总结

创建全局组件时，应该使用Vue对象的component方法，这个方法接收两个参数。第一个字符串：表示组件名称，第二个为一个对象：表示组件内容。
组件要渲染的内容应该写在template选项中，作为其值进行处理。
注册时，推荐组件名称为【小写加分隔符链接的形式】，类似于css属性名的写法。
组件全局注册后，在任何vue实例中都可以使用，但前提是相关vue实例应该在注册后在声明。
组件在使用时，应该以标签形式调用

二、局部组件

使用语法：

new Vue({
    el: "#app",
    components: {
        "btn-one": {
            template: "<h1>hello world1</h1>"
        },
        "btn-two": {
            template: "<h1>hello world2</h1>"
        }
    }
})

调用：

<btn-one></btn-one>

三、父子组件相互转化

<!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>
    <link rel="stylesheet" href="./index.css">
    <style>
        .done {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id="app">
        父级：<input type="text" v-model="mes">
        <btn-be :username="mes" @input1="imags"></btn-be>
    </div>

    <script type="text/javascript" src="./vue.js"></script>
    <script>
        Vue.component("btn-be",{
            props: ["username"],
            template: `
                <div>
                        子级：<input type="text" v-model="usernamev" @input="user">
                </div>
            `,
            data: function(){
                return {
                    usernamev: this.username
                }
            },
            watch: {
                username: function(){
                    this.usernamev = this.username
                }
            },
            methods: {
                user: function(){
                    this.$emit("input1",this.usernamev)
                }
            },
        })
        new Vue({
            el: "#app",
            data: {
                mes: "我是父级传值到子级",
            },
            methods: {
                imags: function(v){
                    this.mes = v
                }
            }
        })
    </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>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        父级：<input type="text" v-model="mes" @input="user">
        <btn-be></btn-be>
    </div>

    <script type="text/javascript" src="./vue.js"></script>
    <script>
        var bus = new Vue();
        Vue.component("btn-be", {
            template: `
                <div>
                        子级：<input type="text" v-model="date" @input="userB">
                </div>
            `,
            data: function () {
                return {
                    date: "我是谁？"
                }
            },
            mounted() {
                bus.$on("name", (v) => {
                    console.log(v)
                    this.date = v;
                })
            },
            methods: {
                userB: function () {
                    bus.$emit("nameer", "小弟听我说！！！")
                }
            }
        })
        new Vue({
            el: "#app",
            data: {
                mes: "我是父级传值到子级",
            },
            methods: {
                user: function () {
                    console.log(this.mes)
                    bus.$emit("name", "我是大哥得声音");
                }
            },
            mounted() {
                bus.$on("nameer", (v) => {
                    this.mes = v;
                })
            }
        })
    </script>
</body>

</html>