为什么slot都是用在子组件

  使用slot场景一:
 
  子组件Minput.vue
 
  <inputtype='text'/>
 
  父组件Minput
 
  <Minput>可以显示吗</Minput>
 
  这种情况下Minput标签内的文字是不会渲染出来的
 
  如果现在想在里面把文字渲染出来怎么办
 
  好用slot
 
  子组件
 
  <inputtype='text'/>
 
  <slot></slot>
 
  这样的话,父组件的里面的文字就可以渲染出来
 
  场景二:具名插槽
 
  子组件he.vue
 
  <header>
 
  <slotname='header'></slot>
 
  </header>
 
  父组件
 
  <he>
 
  <h1name='header'>helloworld</h1>
 
  </he>
 
  渲染出来的结果就是
 
  <header><h1>helloworld</h1></header>
 
  场景三
 
  子组件child
 
  <div>
 
  <h1>这是h1</h1>
 
  <slot>这是分发内容,只有在没有分发内容的情况下显示</slot>
 
  </div>
 
  父组件
 
  <child>
 
  <p>这是一段p</p>
 
  <p>两段p</p>
 
  </child>
 
  渲染出来就是
 
  <div><h1>这是h1</h1><p>这是一段p</p><p>两段p</p></div>
 
  如果父组件
 
  <child></child>
 
  那么渲染出来的就是
 
  <div><h1>这是h1</h1>这是分发内容,只有在没有分发内容的情况下显示</div>
 
  场景四:作用域插槽
 
  <divclass="child">
 
  <slottext="hellofromchild"></slot>
 
  </div>
 
  父组件
 
  <divclass="parent">
 
  <child>
 
  <templateslot-scope="props">
 
  <span>hellofromparent</span>
 
  <span>{{props.text}}</span>
 
  </template>
 
  </child>
 
  </div>
 
  x渲染的话就是
 
  <divclass="parent">
 
  <divclass="child">
 
  <span>hellofromparent</span>
 
  <span>hellofromchild</span>
 
  </div>
 
  </div>






本文转载自中文网

推荐阅读