开发者社区> 前端王睿> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

手把手教你玩转Vue.js组件(三)

简介: 上一节谈到有关Vue.js组件中“传参”的概念,我们使用的是Prop,也就是在标签上自定义属性来向子组件传递数据。这一节我们继续谈谈“传参”,只不过这次不是通过自定义属性,而是通过一个固定的自定义标签,它有个比较特别的名字:插槽。
+关注继续查看

上一节谈到有关Vue.js组件中“传参”的概念,我们使用的是Prop,也就是在标签上自定义属性来向子组件传递数据。这一节我们继续谈谈“传参”,只不过这次不是通过自定义属性,而是通过一个固定的自定义标签<slot>,它有个比较特别的名字:插槽

同样还是前面的例子,只不过有一点点小改动:

<!--HTML-->
<pop-tips ref="tips" src="./imgs/success.png"></pop-tips>
//pop-tips组件
Vue.component('pop-tips',{
    props: {
        duration: {
            type: Number,
            default: 2,
            validator: function (value) {
                return value <= 3;
            }
        },
        src: ''
    },
    data: function(){
        return {
            popShow: false,
            popText: ''
        }
    },
    template: '<div class="pop-tips" :class="{show: popShow}"><span><img v-if="src" :src="src" alt=""/>{{popText}}</span></div>',
    methods: {
        popTips: function(text){
            var _this = this;
            this.popShow = true;
            this.popText = text;
            setTimeout(function () {
                _this.popShow = false;
            },this.duration*1000);
        }
    }
});
// 实例调用组件方法
var vm = new Vue({
    el: '#app',
    methods: {
        showTips: function(){
            popTips('支付成功');
        }
    }
});
function popTips(text){
    vm.$refs.tips.popTips(text);
}

我在提示文字前添加了一张图片,这张图片路径通过Prop传递给子组件,效果如下图:


这效果就是典型的微信弹出提示。当然,若不传src属性,效果就只是纯文字提示:

<!--HTML-->
<pop-tips ref="tips"></pop-tips>

这就是组件灵活性的好处。那么,插槽到底是个什么东西呢?我们该如何使用它呢?

别着急,前面只是铺垫,接下来请听我娓娓道来~

同样是以上效果,我们也可以使用插槽来实现它:

<!--HTML-->
<pop-tips ref="tips">
    <!--替代组件中的slot元素-->
    <img src="./imgs/success.png" alt=""/>
</pop-tips>
//pop-tips组件
Vue.component('pop-tips',{
    //……
    template: '<div class="pop-tips" :class="{show: popShow}"><span><slot></slot>{{popText}}</span></div>',
    //……
});

最终页面上的渲染出来的HTML内容如下:

<div class="pop-tips"><span><img src="./imgs/success.png" alt="">支付成功</span></div>

也就是说组件模板中的<slot>标签是用于指定从父组件传入内容的替换位置,示例中就是将<slot>标签替换成<img>标签。当然,使用插槽有一个好处就是我们可以更加灵活地自定义组件,我们可以传入其他标签,也可以不传任何内容。

同样的,我们也可以给插槽设置默认值:

//pop-tips组件
Vue.component('pop-tips',{
    //……
    template: '<div class="pop-tips" :class="{show: popShow}"><span><slot><img src="./imgs/success.png" alt=""/></slot>{{popText}}</span></div>',
    //……
});

也就是将默认值放在<slot>标签中,但是这样做的话,无论你有没有传图片,最终渲染结果都会带有这张默认图片的。

说了这么多,在实际运用当中,什么时候我们应该使用Prop来“传参”,而什么时候我们又应该用<slot>元素呢?

以下是我个人简单的总结:

Prop:用于传递简单数据,适合需要自定义内容比较少的情况
<slot>: 用于传递标签内容,适合需要自定义内容比较复杂的情况,相对Prop来说更加灵活

所以说,以上所举的例子如果仅仅是为了能够自定义图片的话,完全可以只使用Prop来实现。

本文重点总结:

① 父组件向子组件传递数据最常用方法是Prop<slot>
Prop传递的数据是标签属性值,组件内props属性接收数据;<slot>传递的数据是子标签元素,组件内<slot>元素接收数据并且被替换

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

相关文章
vue.js仿微信聊天窗口展示组件
早期的vue.js仿微信聊天窗口展示组件
0 0
一个Vue.js上下滚动加载组件
一个Vue.js上下滚动加载组件实例
0 0
精通Vue.js系列 │ 组件的递归
在一个组件的模板中,还可以嵌套自身组件,这样就构成了组件的递归。为了避免无限递归,需要设置递归的结束条件。
0 0
Vue.js组件中的slot 内容分发详解
Vue.js组件中的slot 内容分发详解
0 0
精通Vue.js系列 │ 注册全局组件和局部组件
普通Vue组件按照使用范围,可以以下分为两种: (1)全局组件:通过Vue应用实例的component()方法注册,可以直接被其他Vue组件访问。 (2)局部组件:只有父组件通过components选项注册了一个局部组件,父组件才能访问该局部组件。 无论是全局组件还是局部组件,都具有data、methods、computed和watch等选项,而且和根组件一样,也具有类似的生命周期及生命钩子函数。
0 0
Vue.js中的组件通信
Vue.js中的组件通信
0 0
Vue.js中的组件通信
Vue.js中的组件通信
0 0
精通Vue.js系列实例教程 │ Vue组件的单向数据流
为了简化组件的数据传递过程,避免因为在某个组件中随意修改数据而出现混乱,Vue框架提供了以下建议: (1)单向传递组件的属性,即由父组件把属性值传递给子组件的属性。 (2)在子组件中不随意修改由父组件传入的对象或数组类型的属性的内容。
0 0
精通Vue.js系列 │ Vue组件的命名规则
每个Vue组件都有一个名字。组件的名字可以采用lower-kebab-case(小写且短横隔开)或者upper-camel-case(大写且驼峰式)命名规则。
0 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体&mdash;&mdash;新闻晨报,个人公众号:前端微站
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载