新手关于 Vue Slot 的理解

本文出自：

http://blog.csdn.net/wyk304443164

看了Vue两天了，记了不少笔记。基本都是稍微看了下，等项目的时候再搞吧。

---

下面开始

说实话官网比较难懂，在我一开始看的时候，很懵逼，然后看了这篇

http://blog.csdn.net/sinat_17775997/article/details/52484072

讲的真的很好。我都能看懂……(^ ^)

下面来点个人总结：

单个Slot

在children这个标签里面放Dom，Vue不会理你，也就是不会显示，类似React：this.props.children。

//父<children>      <span>12345</span>//这边不会显示</children>//子components: {    children: {        template: "<button>为了明确作用范围，所以使用button标签</button>"    }}

你需要写成这样

children: {    template: "<button><slot></slot>为了明确作用范围，所以使用button标签</button>"  } 

注意这边 slot 相当于一个坑，等着父组件给填上，这边 slot 代表的就是上面的 span

多个Slot

这边需要加name属性，说白了，多个Slot就不像上面单个，需要有个对应关系。

父-> slot="name1"子-> <slot name="name1"

//父<children>      <span slot="name1">12345</span></children>//子components: {    children: {        template: "<button>                        <slot name="name1"></slot>                        button标签                    </button>"    }}

这边写了一个name1，如果有多个，就插多个，比较简单。

作用域

<children>      <span slot="first" @click="tobeknow">     12345    </span>      <span slot="second">56789</span> </children>

这边的@click=”tobeknow”的作用域是 父组件，也就是，不能访问自组件的方法

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

没有分发时内容的提示

如果父组件与自组件有对应的name。那么父组件优先，<slot>xx</slot>,xx不会显示如果没有对应的name那么子组件内的<slot>xxx</slot>,xxx 将会被展开，<slot>标签被删除。

<div id="app">      <children>          <span slot="first">【12345】</span>          <!--上面这行不会显示-->      </children>  </div>  <script>      var vm = new Vue({          el: '#app',          components: {              children: {                template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围，<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>"              }          }      });  </script>

说明：【1】name='first'的slot标签被父组件对应的标签所替换（slot标签内部的内容被舍弃）；【2】name='last'的slot标签，因为没有对应的内容，则显示该slot标签内部的内容。

父组件控制子组件内部的方法

this.$children[0].tohidden = true;

<div id="app">      <button @click="toshow">点击让子组件显示</button>      <children v-if="abc">      </children>  </div>  <script>      var vm = new Vue({          el: '#app',          data: {              abc: false          },          methods: {              toshow: function () {                  this.abc = !this.abc;              }          },          components: {              children: {                template: "<div>这里是子组件</div>"              }          }      });  </script>