前言
今天逛掘金的时候,看到了一篇文章Vue 如何跨组件传递 Slot
思索
众所周知,Vue
中组件传递一般都是使用插槽,但是在一些需要跨 N 层父子关系的情况下,就非常的难受
回过头来看看React
就可以直接通过props
来传递组件,简单粗暴
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">{props.left}</div>
<div className="SplitPane-right">{props.right}</div>
</div>
);
}
function App() {
return <SplitPane left={<Contacts />} right={<Chat />} />;
}
虽然大数情况Vue
的slot
更胜一筹,但是那么Vue
中可不可以使用React
这种写法呢?
答案是当然可以啦 ,那就是component
组件和is
属性
介绍
其中 is
类型为string | ComponentDefinition | ComponentConstructor
所以我们只要使用
<template lang="pug">
div
component(:is="Component1")
component(:is="Component2")
</template>
<script>
import Component1 from "./Component1.vue"; //组件1
import Component2 from "./Component2.vue"; //组件2
export default {
data() {
return { Component1, Component2 };
},
};
</script>
他们就能直接在实例中正常渲染了;
由此,我们举一反三,就能通过prop
provide / inject
或者通过其他方式将组件传递到子组件
// 父 template
Child(:my-slot="Component2")
// 子
<template lang="pug">
component(:is="mySlot")
</template>
<script>
export default {
props: ["mySlot"],
};
</script>
emmm,有react内味了...
结语
完了完了,又到了猝死的时间了
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!