vue组件

Posted sunch

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件相关的知识,希望对你有一定的参考价值。

概述

组件 (Component) 是 Vue.js 最强大的功能之一。

组件可以扩展 html 元素,封装可重用的代码。是可复用的Vue实例。

组件注册

1 全局注册

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<global_com></global_com>
<global_com></global_com>
<global_com></global_com>
</div>

<div id="app1">
<global_com></global_com>
</div>

<script src="vue.js"></script>
<script>
    // 全局注册, 第一个是组件名,第二个参数是个对象
    Vue.component("global_com", {
        template: `<div><h1>{{global_data}}</h1></div>`,
        data(){
            return{
                global_data:"全局注册测试"
            }
        }
    });
    const app = new Vue({
        el: "#app"
    });

     const app1 = new Vue({
        el: "#app1"
    })
</script>
</body>
</html>
全局注册

2 局部注册

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<my_com_name></my_com_name>
</div>

<!--局部注册到了app下,所以下面的app1没有-->
<!--<div id="app1">-->
<!--<my_com_name></my_com_name>-->
<!--</div>-->
<script src="vue.js"></script>
<script>
    let my_com = {
        template:`<div><h1>{{my_data}}</h1></div>`,
        data(){
            return {
                my_data: "局部注册测试"
            }
        }
    };

    const app = new Vue({
        el: "#app",
        components:{
            my_com_name:my_com
        }
    });

    const app1 = new Vue({
        el: "#app1",
    })
</script>
</body>
</html>
局部注册

3 父子组件的应用

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
    let child = {
        template: `<div><h2>{{name}}</h2></div>`,
        data(){
            return {
                name: "子组件"
            }
        }
    };
    let parent = {
        // 注意下面的模板中子组件要写在模板中
        template:`<div>
                      <h1>{{name}}</h1>
                      <child></child>
                  </div>`,
        data(){
            return {
                name: "父组件"
            }
        },
        components:{
            child: child  // 子组件注册在父组件中
        }
    };

    const app = new Vue({
        el: "#app",
        components: {
            parent: parent
        }

    })
</script>
</body>
</html>
父子组件的应用

组件间的传值

1 父组件向子组件传值

关键点:父组件在自己模板中的子组件的标签中绑定一个属性,然后在子组件中使用props接收

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
    let child = {
        template: `<div>
                        <h2>{{name}}</h2>
                        <h3>父亲传过来的值:{{communication}}</h3>
                   </div>`,
        data(){
            return {
                name: "子组件"
            }
        },
        props: ["communication"]
    };
    let parent = {
        template:`<div>
                      <h1>{{name}}</h1>
                      <child :communication="communication"></child>
                  </div>`,
        data(){
            return {
                name: "父组件",
                communication: "爸爸给儿子说的话"
            }
        },
        components:{
            child: child
        }
    };

    const app = new Vue({
        el: "#app",
        components: {
            parent: parent
        }

    })
</script>
</body>
</html>
父向子传值

2 子组件向父组件传值

关键点:子组件通过自己的,即this.$emit("事件名称",数据),提交一个事件;父组件在自己模板中的子组件标签中@"事件名称"="自己处理的事件",来监听该事件,再用自己的方法处理事件以及数据;

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
    let child = {
        template: `<div>
                        <h2>{{name}}</h2>
                        <button @click="click_event">点我发消息</button>
                   </div>`,
        data(){
            return {
                name: "子组件",
                son_msg: "我给爸爸发的消息!"
            }
        },
        methods: {
            click_event: function () {
                this.$emit("send_msg_event", this.son_msg)
            }
        }
    };
    let parent = {
        template:`<div>
                      <h1>{{name}}</h1>
                      <child @send_msg_event="parent_method"></child>
                      <p>儿子发过来的消息:{{son_msg}}</p>
                      <p>{{num}}</p>
                  </div>`,
        data(){
            return {
                name: "父组件",
                num:"",
                son_msg:""
            }
        },
        components:{
            child: child
        },
        methods:{
            parent_method: function (data) {
                this.num ++;
                this.son_msg = data
            }
        }
    };

    const app = new Vue({
        el: "#app",
        components: {
            parent: parent
        }

    })
</script>
</body>
</html>
子向父传值

3 非父子组件之间的传值

关键点:使用中间人组为中介middle_Event = new Vue();提交事件使用middle_Event.$emit(),父组件使用middle_Event.$on()监听提交的事件,注意this

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <com1></com1>
    <com2></com2>
</div>
<script src="vue.js"></script>
<script>
    middle_Event = new Vue();
    let com1 = {
        template:`<div>
                      <h1>{{name}}</h1>
                      <button @click="click_com1">点我通信</button>
                   </div>`,
        data(){
            return {
                name: "com1",
                say_data: "com1说的话" 
            }
        },
        methods: {
            click_com1: function () {
                middle_Event.$emit("com1_say", this.say_data)
            }
        }
    };
    let com2 = {
        template:`<div>
                      <h1>{{name}}</h1>
                      <p>com2中接收的com1发过来的值:<span :class="{active: is_show}">{{com1_send_msg}}</span></p>
                   </div>`,
        data(){
            return {
                name: "com2",
                com1_send_msg: "",
                is_show : true
            }
        },
        mounted(){
            console.log(this);  // 这个this是app这个Vue对象
            let _this = this;
            middle_Event.$on("com1_say", function (data) {
                console.log(this);  // 这个this是middle_Event这个Vue对象
                _this.com1_send_msg = data
            })
        }
    };
    const app = new Vue({
        el: "#app",
        components: {
            com1: com1,
            com2: com2
        }
    })
</script>
</body>
</html>
同级传值

混合Mixins

重复功能和数据的储存器,自己的可以覆盖Mixins的内容。

不同组件的相同的部分提出去,使用mixins,优化我们的代码;

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div>
<script src="vue.js"></script>
<script>
let same = {
    data(){
        return {
            is_show: true
        }
    },
    methods: {
        show_or_hide: function () {
            this.is_show = ! this.is_show
        }
    }
};
let com1 = {
    template: `<div>
                    <p v-show="is_show">哈哈哈哈哈1</p>
                    <button @click="show_or_hide">点我显示隐藏1</button>
               </div>`,
    mixins: [same],
};
let com2 = {
    template: `<div>
                    <p v-show="is_show">哈哈哈哈哈2</p>
                    <button @click="show_or_hide">点我显示隐藏2</button>
               </div>`,
    mixins: [same],
    // 如果自己有,就用自己的,自己没有 就用mixins中的
    data(){
        return {
            is_show: false
        }
    }
};
const app = new Vue({
    el: "#app",
    components: {
        com1: com1,
        com2: com2
    }

})
</script>
</body>
</html>
混合minins

插槽slot

插槽是一套内容分发的API,在组件中,<slot>作为内容承载分发的出口;

相似的的组件中不同之处的地方使用插槽自定义;

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<com1><h2>asdasf</h2></com1>-->  <!-- 插不了数据-->
    <com1>
        <div slot="my_slot">
            <h3>使用插槽擦插入数据1</h3>
            <h4>使用插槽擦插入数据1.1</h4>
        </div>
    </com1>
    
    <com1>
        <h3 slot="my_slot">使用插槽擦插入数据2</h3>
        <h4 slot="my_slot">使用插槽擦插入数据2.1</h4>
        <h4 slot="my_slot1">使用插槽1擦插入数据</h4>
    </com1>
</div>

<script src="vue.js"></script>
<script>
    let com1 = {
        template: `<div>
                        <h2>原来的数据</h2>
                        <slot name="my_slot"></slot>
                        <slot name="my_slot1"></slot>
                   </div>`
    };
    const app = new Vue({
        el: "#app",
        components: {
            com1: com1
        }
    })
</script>
</body>
</html>
插槽slot

 

以上是关于vue组件的主要内容,如果未能解决你的问题,请参考以下文章

vue3中的fragment(片段)组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件

vue-个人学习----组件

vue视频学习笔记05