五，组件化高级

最新推荐文章于 2022-03-20 22:14:26 发布

银角大王qaq

最新推荐文章于 2022-03-20 22:14:26 发布

阅读量75

点赞数

分类专栏： vue 组件化 slot 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44731169/article/details/107468061

版权

vue 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

组件化

4 篇文章 0 订阅

订阅专栏

slot

1 篇文章 0 订阅

订阅专栏

1. 编译作用域

官方准则：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。
概念性的东西难以理解我们用一个小案例来说明
- isShow属性包含在组件中，也包含在Vue实例中
- 而我们在使用的时候，整个组件的使用过程是相当于在父组件中出现的。
- 那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
- 因此，isShow使用的是Vue实例中的属性，而不是子组件的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn v-show="isShow"></cpn>
</div>

<template id="cpn">
    <h2>我能不能显示出来</h2>
</template>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                isShow:true
            },
            components:{
                'cpn':{
                    template:'#cpn',
                    data(){
                        return{
                            isShow:false
                        }
                    }
                }
            }
        })
</script>

</body>
</html>

2. slot 插槽

slot翻译为插槽：
在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等
组件的插槽：
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么
例子：移动网站中的导航栏。
移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了。

slot基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn>
        <span>1.利用slot插槽替换元素</span>
    </cpn>
    <cpn>
        <h3>2.替换多个元素</h3>
        <p>替换的元素p内容</p>
    </cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>

</div>


<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件的内容  作者：小贱</p>
        <slot><button>按钮</button></slot>
    </div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">



    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            },
            components:{
                cpn:{
                    template:'#cpn'
                }
            }
        })
</script>
</body>
</html>

3. 具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个。
- 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
- 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
- 这个时候，我们就需要给插槽起一个名字
- 如何使用具名插槽呢？
- 非常简单，只要给slot元素一个name属性即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn><span slot="center">标题</span></cpn>
    <cpn><span slot="left">返回</span></cpn>
</div>

<template id="cpn">
    <div>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
        <slot name="left"><span>左边</span></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            },
            components:{
                cpn:{
                    template: '#cpn'
                }
            }
        })
</script>

</body>
</html>

银角大王qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五，组件化高级

1. 编译作用域官方准则：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。概念性的东西难以理解我们用一个小案例来说明isShow属性包含在组件中，也包含在Vue实例中而我们在使用的时候，整个组件的使用过程是相当于在父组件中出现的。那么他的作用域就是父组件，使用的属性也是属于父组件的属性。因此，isShow使用的是Vue实例中的属性，而不是子组件的属性<!DOCTYPE html><html lang="en">&lt
复制链接

扫一扫

专栏目录