Vue的props和slot浅析

两者的相同点,不同点,应用场合:

相同点:

都是发生在父子组件之间的关系;

都是为了应对父组件调用子组件的场合;

区别一:设计思想
props的设计思想是传递状态,将数据驱动组件的思想贯彻到底,子组件的渲染取决于父组件传递的数据;
slot的设计思想是传递DOM节点,将父组件的模板代码节点直接传递给子组件的某个slot,来达到最终渲染的目的;
区别二:作用范围
父组件在调用子组件的时候申明并赋值变量,那么子组件内将其加到props列表后,就可以接收并使用,但是一旦传递过来,作用域就发生变化;
子组件虽然为父组件预留slot,但是slot的作用域依然属于父组件,所以可以访问到父组件内的所有状态;
个人认为:
slot是 比props更高级的封装,通常子组件的调用是为父组件服务的,所以使用插槽这么个形象的概念,为父组件预留平台,使得父组件可以直接在子组件中熏染自己的内容;
渲染父组件的内容到子组件,slot比props更直接,更省力,更符合组件的设计思想,既然是父组件的内容表达,为何不在父组件里加工好直接放入子组件渲染,而是通过props变量去传递接收,进而由子组件去代加工渲染呢?
如果使用了一个别人封装好的子组件,那么其内容源码一般是不建议修改的,因为它可能还会复用到其他地方,容易出现一改俱改的局面,所以子组件的封装让其失去了灵活性,所以,使用slot插槽可以很大的发挥父组件的自定义的能力,子组件不会干涉slot存放的任何内容,而props做不到这一点,必须传递子组件内封装好的prop变量,不可更改和自定义;
作用域插槽的使用将父子组件的融合发挥到极致,为了应对有时候组件的渲染需要同时由父子组件分工协作共同完成,slot的默认作用域是调用它的父组件,但是使用slot-scope声明一个作用域变量,通过这个变量可以访问到子组件的所有状态(前提是必须知道),这样父组件在调用子组件的时候不但可以在slot中加工渲染自己的数据和模板,还可以加工渲染子组件的内的数据和模板,而且对子组件的数据是只读的,不会修改;
至于啥时候用什么,看业务需求和实现难度,两者可能都可以实现。
上一篇:碎碎念的开始


下一篇:web3.js编译Solidity,发布,调用全部流程(手把手教程)