Vue.js-----轻量高效的MVVM框架（使用slot分发内容）

#单个slot

html:

<h3>#单个slot</h3><!-- 定义child01模板 --><template id="child01">    <div>this is temp01 component!</div>    <slot>        如果没有分发内容，这里将会被显示    </slot></template><div id="dr01">    <child01></child01>    <br /><br />    <child01>        <div>这里有新的内容01</div>        <div>这里有新的内容02</div>    </child01></div>

js:

//*********************************************************//单个slotvar child01 = Vue.extend({    template: "#child01",});var dr01 = new Vue({    el: "#dr01",    components: {        "child01": child01    }});

 结果展示:

　　

 

#具名Slot（有名称的slot）

html：

<h3>#具名Slot（有名称的slot）</h3><!-- 定义模板child02 --><template id="child02">    <slot name="s1"></slot>    <slot></slot>    <slot name="s2"></slot></template><div id="dr02">    <child02>        <div slot="s1">this is slot01</div>        <div slot="s2">this is slot02</div>        <div>this is a simple div01</div>        <div>this is a simple div02</div>    </child02></div>

 

js:

//*********************************************************//具名slotvar child02 = Vue.extend({    template: "#child02"});var dr02 = new Vue({    el: "#dr02",    components: {        "child02": child02    }});

 

结果展示：

　　

 

#编译作用域

html:

<h3>编译作用域</h3><template id="child03">    <div>the two items following is child msg:</div>    <div>{{cmsg_01}}</div>    <div>{{cmsg_02}}</div>    <br />    <div>the three items following is parent msg:</div>    <slot name="s1"></slot>    <slot></slot>    <slot name="s2"></slot></template><div id="dr03">    <child03>        <div slot="s1">{{msg01}}</div>        <div slot="s2">{{msg02}}</div>        <div>{{msg03}}</div>    </child03></div>

 

js:

//*********************************************************//编译作用域var child03 = Vue.extend({    data: function() {        return {            cmsg_01: "this is child msg_01",            cmsg_02: "this is child msg_02",        }    },    template: "#child03",})var dr03 = new Vue({    el: "#dr03",    data: {        msg01: "this is parent msg01",        msg02: "this is parent msg02",        msg03: "this is parent msg03",    },    components: {        "child03": child03    }});

 

结果展示：