Vue.js 2—插槽 Slots

Vue.js 2—插槽 Slots_第1张图片        

        我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props ,但组件要如何接收模板内容呢?  在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。

Vue.js 2—插槽 Slots_第2张图片

Vue.js 2—插槽 Slots_第3张图片

此处,传递的是标签结构而不再是数据了。

Vue.js 2—插槽 Slots_第4张图片

 Vue.js 2—插槽 Slots_第5张图片

Vue.js 2—插槽 Slots_第6张图片 

Vue.js 2—插槽 Slots_第7张图片 

Vue.js 2—插槽 Slots_第8张图片

Vue.js 2—插槽 Slots_第9张图片

Vue.js 2—插槽 Slots_第10张图片

Vue.js 2—插槽 Slots_第11张图片 

       在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点,我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽,我们也确实有办法这么做! 可以像对组件传递 props 那样,向一个插槽的出口上传递 attributes(属性) 。

Vue.js 2—插槽 Slots_第12张图片

Vue.js 2—插槽 Slots_第13张图片

Vue.js 2—插槽 Slots_第14张图片

Vue.js 2—插槽 Slots_第15张图片

Vue.js 2—插槽 Slots_第16张图片

Vue.js 2—插槽 Slots_第17张图片

Vue.js 2—插槽 Slots_第18张图片

Vue.js 2—插槽 Slots_第19张图片

你可能感兴趣的:(前端,vue.js,前端,javascript)