Vue.js中组件中的slot实例详解

 <template id="per">
    <div>
      <p>姓名:...</p>
      <p>年龄:...</p>
      <p>职业:...</p>
    </div>
  </template>

<template id="per">
    <div>
      <p>姓名:</p>
      <p>年龄:</p>
      <p>职业:</p>
    </div>
  </template>

  var person = {
     template : "#per"  //利用id
    };
    new Vue({
      el: "#app",
      data: {
        componentData: {
          name : "vam",
          age : 18,
          job : "student"
        }
      },
      components : {
        "person" : person
      }
    });

  <div id="app">
    <person>
      <span slot="name">{{componentData.name}}</span>
      <span slot="age">{{componentData.age}}</span>
      <span slot="job">{{componentData.job}}</span>
    </person>
  </div>

 <template id="per">
    <div>
      <p>姓名:<slot name="name"></slot></p>
      <p>年龄:<slot name="age"></slot></p>
      <p>职业:<slot name="job"></slot></p>
    </div>
  </template>