vue中的插槽_代码007(未授权)

本文介绍: 学习vue中的插槽，这是学习笔记。

　　在vue中，有的名词听着高大上，挺怪异的，比如插槽，就是slot，它的作用是为了解决组件之间写的内容在组件中的使用问题。

　　一、插槽的作用

<!DOCTYPE html>
<html>
<head>
  <title>Vue中的插槽</title>
  <script src="vue.js"></script>
</head>
<body>
    <div id="app">
          <mycard>111</mycard>          
          <mycard>222</mycard>          
          <mycard></mycard>          
    </div>
  <!-- 组件 AddPerson -->
    <template id="infoCard">
        <div>
            <slot>这是默认信息</slot>
        </div>
    </template>
    <script>
        Vue.component('mycard', { template: '#infoCard' });
        new Vue({ el: '#app'});
  </script>
</body>
</html>

　　显示结果：

　　可以看出，在组件的模板定义中使用<slot></slot>就可以使用该组件在父项中定义的内容，如果没有定义，那么就使用slot默认的定义。

　　二、插槽的具名使用

<!DOCTYPE html>
<html>
<head>
  <title>Vue的插槽</title>
  <script src="vue.js"></script>
</head>
<body>
    <div id="app">
          <mycard  style="background-color: aquamarine;">
                <header>头部1</header>
                    11111
                <footer>底部1</footer>
          </mycard>          
          <mycard  style="background-color: rgb(160, 177, 65);">
                <header>头部2</header>
                     22222
          </mycard>
          <mycard style="background-color: rgb(102, 87, 235);">
                      33333 
                <footer>底部3</footer>
          </mycard>          
          <mycard style="background-color: rgb(238, 105, 209);">44444</mycard>          
          <mycard style="background-color: rgb(240, 180, 130);"></mycard>          
    </div>
    <template id="infoCard">
        <div>
          <slot #header></slot>
          这是信息内容：{{info}}
          <slot name="footer"></slot>
        </div>
    </template>
    <script>
        Vue.component('mycard', {
          data(){
              return {  info:"Infomation"  }
          },
          template: '#infoCard',
          methods: {
          },
          props: ['infos']
        });
        new Vue({ el: '#app'});
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Vue的插槽</title>
  <script src="vue.js"></script>
</head>
<body>
    <div id="app">
          <mycard  :infos="message" v-slot:default="myprops">
                {{myprops.mynews.title}}
                <br>
                {{myprops.mynews.content}}
          </mycard>          
          <p>---分割线---</p>
          <mycard  :infos="message" v-slot:default="myprops">
          </mycard>          
    </div>
    <template id="infoCard">
        <div>
          <span>{{infos.title}}</span>
          <br>
          <slot :mynews="news">{{news.title}}--{{news.content}}</slot>
        </div>
    </template>
    <script>
        Vue.component('mycard', {
          data(){
              return {  news:{
                  title:"组件内部的新闻标题",
                  content:"组件内部的新闻内容"
              }  }
          },
          template: '#infoCard',
          props: ['infos']
        });
        new Vue({
             el: '#app',
            data:{
              message:{
                title:'父项的标题'
              }
            }
      });
  </script>
</body>
</html>