vue 精简教程（三)大组件它真的来了组件通信方式浅谈过滤和自定义组件

最新推荐文章于 2022-05-19 15:35:29 发布

前端付豪

最新推荐文章于 2022-05-19 15:35:29 发布

阅读量333

点赞数

分类专栏： vue 文章标签： vue javascript 过滤器

本文链接：https://blog.youkuaiyun.com/weixin_43815680/article/details/109133512

版权

文章目录

前言
一、vue component组件？
二、组件通信
总结

前言

一、vue component组件？

1.引入库`全局组件和私有组件`的基本定义？

有几个注意的事情：
1）全局组件 component 建立在 vue 实例前
2）私有组件 componnets写在全局或者 vue实例内部
3）都可以在容器中使用展示
4）需要特别注意写法和格式
在这里插入图片描述

4）实现代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>

</style>

<body>
    <div id="box">
        <vue-header></vue-header>
        <vue-footer></vue-footer>
    </div>
</body>

</html>
<script>
    // 这里定义的是全局组件 
    Vue.component('vue-header', {
   
        template: '<h2>我是全局组件</h2>'
    })
    // 下面vue实例 定义的是 私有组件 
    var vm = new Vue({
   
        el: '#box',
        components: {
   
            'vue-footer': {
   
                template: '<h2>我是私有组件 </h2>'
            }
        },
    })
</script>

页面展示效果
在这里插入图片描述
5）再加了一个将私有组件的template写在上面单独写出来也是可以的
但是私有组件不能互相访问私有组件也不能访问全局组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>

</style>

<body>
    <div id="box">
        <vue-header> </vue-header>
        <vue-footer> </vue-footer>
        <other></other>
    </div>

    <template id="other">
        <h3>我是另外一个子组件</h3>
        <!-- 下面这两个在这里无法使用  -->
        <!-- <vue-footer></vue-footer>
        <vue-footer></vue-footer> -->
    </template>
</body>

</html>
<script>
    // 这里定义的是全局组件 
    Vue.component(
        'vue-header', {
   
            template: '<h2>我是全局组件</h2>'
        })
    // 下面vue实例 定义的是 私有组件 
    var vm = new Vue({
   
        el: '#box',
        components: {
   
            'vue-footer': {
   
                template: '<h3>我是一个私有组件 </h3>'
            },
            // 这个定义的私有组件  它的template写在了上面 
            'other': {
   
                template: "#other"
            }
        },
    })
</script>

2. `vue 动态组件`

我们想简单实现一下这个效果
在这里插入图片描述
我们怎么拆解一下？
1）先写右边两部分我们把它写到一个里面
首先定义三个组件模板

<template id="writeback">
    <div>
        <div>回复我的</div>
        <div>这是回复我的界面</div>
    </div>
</template>
<template id="aite">
    <div>
        <div>@我的</div>
        <div>这是@我的界面</div>
    </div>
</template>
<template id="zan">
    <div>
        <div>收到的赞</div>
        <div>这是收到赞的界面</div>
    </div>
</template>

2)注册为私有组件

components: {
   
    'writeback': {
   
        template: '#writeback'
    },
    'aite': {
   
        template: '#aite'
    },
    'zan': {
   
        template: '#zan'
    },

3)左边的部分就做好啦

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    * {
   
        margin: 0;
        padding: 0;
    }

    body {
   
        background-color: #67a3e1;
    }
    /* CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间 */
    .bili-content {
   
        display: flex;
    }

    .bili-content .bili-leftnav {
   
        width: 200px;
        background-color: #dee9f7;
    }

    .bili-content .bili-leftnav li {
   
        padding: 10px 20px;
        height: 50px;
        line-height: 50px;
    }

    .bili-content .bili-leftnav li:hover {
   
        cursor: pointer;
    }

    .bili-content .bili-leftnav .active {
   
        color: #5faee3;
    }

    .bili-content .bili-rightcontent {
   
        flex: 1;
        margin-left: 20px;
    }

    .bili-content .bili-rightcontent div:nth-child(1) div {
   
        margin-top