本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9
也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件。那么如何实现呢?
单个插槽:
我是父组件的标题
这是一些初始内容
这是更多的初始内容
组件中的模板中写入slot标签,在父级调用子组件的时候传入html即可。
具名插槽:
这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
这里有一些联系信息
具名插槽,顾名思义当有多个slot标签时,你需要给他们起个自己的名字,在父组件调用时需要slot="内部的对应名字",当存在没有命名的slot标签时,父级组件传入的默认html代码将全部输出在无名的slot标签中。
作用域插槽
hello from parent
{{ props.text }}
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
其实就是相当于,在父组件中可以获取到子组件传递出来的props对象,从而渲染到父组件上。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



