Vue插槽的应用及属性

#html

 <todo>
   <p slot="aa">生命的美好</p>
    {
   
   {list}}
 </todo>

把注册的组件todo放到html里展示到页面上

#script

Vue.component("todo",{
data(){
     return{
       tt:"拉面"
     }
},
template:`<div>
   <h4>真相只有一个</h4>
   <p>{
   
   {tt}}</p>
   <slot name="aa"></slot>
   <slot></slot>
</div>`
 new Vue({
   el:"#app",
     data:{
      list:"我是谁?"
}

在定义的组件里写#slot#单词就可以在组件名里写标签,最外层只能有一个标签,slot的属性名只能是name

おすすめ

転載: blog.csdn.net/woshishui099/article/details/101347823