上一节 谈到有关 vue.js 组件中 "传参" 的概念, 我们使用的是 Prop, 也就是在标签上自定义属性来向子组件传递数据. 这一节我们继续谈谈 "传参", 只不过这次不是通过自定义属性, 而是通过一个固定的自定义标签 , 它有个比较特别的名字: 插槽.
同样还是前面的例子, 只不过有一点点小改动:
<!--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>
也就是说组件模板中的标签是用于指定从父组件传入内容的替换位置, 示例中就是将标签替换成标签. 当然, 使用插槽有一个好处就是我们可以更加灵活地自定义组件, 我们可以传入其他标签, 也可以不传任何内容.
同样的, 我们也可以给插槽设置默认值:
//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>',
//......
});
也就是将默认值放在标签中, 但是这样做的话, 无论你有没有传图片, 最终渲染结果都会带有这张默认图片的.
说了这么多, 在实际运用当中, 什么时候我们应该使用 Prop 来 "传参", 而什么时候我们又应该用元素呢?
以下是我个人简单的总结:
Prop: 用于传递简单数据, 适合需要自定义内容比较少的情况
: 用于传递标签内容, 适合需要自定义内容比较复杂的情况, 相对 Prop 来说更加灵活
所以说, 以上所举的例子如果仅仅是为了能够自定义图片的话, 完全可以只使用 Prop 来实现.
本文重点总结:
① 父组件向子组件传递数据最常用方法是 Prop 和
② Prop 传递的数据是标签属性值, 组件内 props 属性接收数据; 传递的数据是子标签元素, 组件内 元素接收数据并且被替换
来源: http://www.jianshu.com/p/8f8d512009ef