一周精通Vue(二)组件访问、插槽、组件作用域、模块化-阿里云开发者社区

开发者社区> 巴黎香榭> 正文

一周精通Vue(二)组件访问、插槽、组件作用域、模块化

简介: vue、组件访问、插槽、组件作用域、模块化、vue基础、快速上手vue、vue详细讲解
+关注继续查看

组件之间的访问方式

  • $children

    父组件通过 this.$children[index]  可以访以对象的形式问子组件  一般来说index取值会有不稳定性 
    
  • $.refs(常用)

    父组件通过 this.$refs.name  name为ref的值 通过给子组件添加ref属性来获取自定组件对象 去操作
    
  • $.parent

    子组件通过 this.$parent 访问父组件 拿到父组件对象 
    
  • $.root

    子组件通过 this.$root方法来访问根组件 即Vue实例
    

插槽

  • slot 标签

    表示这个是一个插槽
    基本使用:<slot></solt>
    如果有多个值,同时放入到组件进行替换时 一起作为替换元素
<div id="app">
    <cpn>
        <!--    插槽赋值-->
        <button> 按钮</button>
    </cpn>
    <!--    默认会将所有内容替换到插槽-->
    <cpn>
        <div>我是div</div>
        <button>新按钮</button>
    </cpn>
    <!--    执行插槽替换-->
    <cpn>
        <button slot="s1">这个s1插槽的按钮</button>
    </cpn>

</div>

<template id="my-cpn">
    <div>
        <!--        设置插槽的默认值-->
        <slot>我是一个插槽</slot>
        <!--        如果要使用多个插槽就需要给每个插槽指定name属性-->
        <slot name="s1">我是一个插槽</slot>
        <slot name="s2">我是一个插槽</slot>

    </div>
</template>

<script>

    const vm = new Vue({
        el: "#app",
        data: {},
        components: {
            cpn: {
                template: '#my-cpn',
                data() {
                    return {name: '子组件'}
                }
            }
        }
    });

</script>
  • 组件的作用域
    在当前模板内不管引用任何组件 只要使用到变量 一定是当前模板所绑定的组件
    每一个模板之间的作用域是相互隔离的,
    如果想引用子组件的数据就需要进行 template引用
  • 作用域插槽
    父组件替换插槽的标签,但是内容由子组件来提供
    template引用:

    1. 在子组件模板中使用 来绑定子组件内的数据
    2. 然后在引用处 使用 进行引用子组件插槽对象
    3. 通过 slot.data 获取子组件的数据对象

模块化

  • 为什么要用模块化?

    由于全局变量不同文件之间的变量相互影响 导致变量覆盖
    
  • ES6的模块化 导入和导出
// file : a.js
var name = 'tim'
var age = 23
function sum(num1, num2){
    return num1 + num2;
}

// 导出 方式1
export {
    name,
    age,
    sum
}
// 导出 方式2
export var num1 = 100
export var page = 10
// 导出方法
export function sub (n1, n2){
    return n1 - n2
}
// 导出类
export class dog {
  run(){
    console.log('奔跑');  
    }
}
export default sum()
// export default 导出的内容只有一个 也只能有一个


// file : b.js
// 导入
import {name, age, num1} from './a.js'
console.log(name);
console.log(age);
console.log(num1);
console.log(sub(num1, age));

// 导入 export default 内容
import sm from './a.js'
sm(1, 2)

// 如果要使用export 和 import
// 就必须要在引入js的时候设置 type='module' 属性

// 全部导入
import * from './a.js'

补充

  • v-slot

    在vue v2.6.0中,新引入了v-slot指令,他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性
// 根组件
<template>
    <div>
        <mo>
            <template v-slot:header="slotProps">
                <h1>{{slotProps.header + ' ' + msg}}</h1>
                
            </template>

            <p>A paragraph for the main content.</p>
            <p>And another one.</p>

            <template v-slot:footer>
                <p>Here's some contact info</p>
            </template>
        </mo>
    </div>
</template>

<script>
    import mo from './module.vue'
    export default {
        components: {
            mo
        },
        data() {
            return {
                msg: '这是根组件的消息'
            }
        }
    }
</script>

// 子组件
<template>
    <div>
        --header start--
        <header>
            <slot name="header" :header="header"></slot>
        </header>
        --header over--
        <div></div>
        --default start--
        <slot></slot>
        --default over--
        <div></div>
        --footer start--
        <footer>
            <slot name="footer"></slot>
        </footer>
        --dooter over--
    </div>
</template>

<script>
    export default {
        data() {
            return {
                header: '来自子组件的头部消息'
            }
        }
    }
</script>

<style scoped>

</style>
  1. 组件中可以使用template标签,加v-slot指令制定具名插槽,当没有指定插槽name时,默认出口会带有隐含的名字“default”。
  2. 根组件可以利用v-slot:header="slotProps"接受组件中的消息,组件中只需要在就可以了
  3. 如果被提供的内容只有一个默认插槽时,组件的标签可以直接被当做插槽的模板来使用
  4. 动态参数也可是使用到插槽当中
  5. v-slot的缩写是#,但是如果使用#的话,必须始终使用具插槽来代替

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
代理 XP”组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用 sp_configure 来启用“代理 XP”
新建维护计划的时候遇到下图的报错信息  标题: Microsoft SQL Server Management Studio------------------------------ “代理 XP”组件已作为此服务器安全配置的一部分被关闭。
1783 0
KUBERNETES01_部署方式的变迁、为什么用Kubernetes、工作原理、组件交互原理、动画演示(二)
KUBERNETES01_部署方式的变迁、为什么用Kubernetes、工作原理、组件交互原理、动画演示(二)
9 0
E-MapReduce的Presto组件默认支持访问oss数据
阿里云E-MapReduce从EMR-2.1.0版本镜像开始,Presto组件默认就支持访问oss数据了,不再需要引导操作额外支持。
2321 0
论数据库访问组件的选择--火地晋大作读后感
前言 火地晋做了一件有意义的事情。把这些ORM对比了一下(http://www.cnblogs.com/yelaiju/p/3209506.html)。 这里要讨论一下我们用一个什么样的策略来选择数据库访问组件。
777 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12034 0
DevExpress - 使用 GaugeControl 标尺组件制作抽奖程序 附源码
  前不久,公司举办了15周年庆,其中添加了一个抽奖环节,要从在读学员中随机抽取幸运学员,当然,这个任务就分到了我这里。   最后的效果如下,启动有个欢迎页面,数据是来自Excel的,点击开始则上面的学号及姓名等信息开始随机滚动,显示区域自适应长度变化等。
936 0
深入理解JavaScript系列(14):作用域链(Scope Chain)
http://www.cnblogs.com/TomXu/archive/2012/01/18/2312463.html 前言 在第12章关于变量对象的描述中,我们已经知道一个执行上下文 的数据(变量、函数声明和函数的形参)作为属性存储在变量对象中。
851 0
KUBERNETES01_部署方式的变迁、为什么用Kubernetes、工作原理、组件交互原理、动画演示(五)
KUBERNETES01_部署方式的变迁、为什么用Kubernetes、工作原理、组件交互原理、动画演示(五)
10 0
原生JS实现一个无缝轮播图插件(支持vue)
前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,本来在vue里面写了一下,但是发现总是出现bug,所以后来准备封装一个插件来实现。
4529 0
+关注
巴黎香榭
一个有梦想的咸鱼~~~
106
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载