首页 > 代码库 > vue日常学习（2）

vue日常学习（2）

2024-09-07 16:31:39   217人阅读

1.组件学习之内容分发

1.1 作用域插槽

父级

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span><br/>
      <span>{{ props.text }}</span><br/>
　　　 <span>{{ props.text2 }}</span><br/>
　　　 <span>{{ props.text3 }}</span>
    </template>
  </child>
</div>

子级模板

<div class="child">　
  <span>first hello</span>
  <slot text="hello from child" text2="hello again"></slot>　
  <slot text3=‘hello!!!!‘></slot>
</div>

其中child组件首先会调用模板，然后在使用child组件时标签内的template部分将会被渲染到子组件child的slot标签中。

scope 的值对应一个临时变量名(保存的是对象)，此变量接收从子组件中传递的 prop 对象，每个slot会产出一个prop对象，在这里就分别是{text:‘hello from child‘,text2:‘hello again‘}和{text3:‘hello!!!!‘}，每个slot都会用template渲染一次，最终完成渲染。

注：对于组件将要分发的内容，如果没有指定slot名字（不是具名slot），那么分发的内容将会在子组件中的每个slot中都进行渲染。

输出结果是

first hello
here is parent
hello from child
hello again
here is parent


hello!!!!

　　

vue日常学习（2）


联系
我们