vue自学入门-4（vue slot）

vue自学入门-1（Windows下搭建vue环境）

vue自学入门-2（vue创建项目）

vue自学入门-3（vue第一个例子）

vue自学入门-4（vue slot）

vue自学入门-5（vuex state）

vue自学入门-6（vue jsx）

vue自学入门-7（vue style scope）

vue自学入门-8（vue slot-scope）

好长时间没有用vue了，从新安装vue脚手架。

1、从新安装webpack

cnpm install --save-dev webpack

2、vue init webpack my-project-slot

3、进入目录 cnpm install

4、cnmp run dev

启动成功

5、router-view 部分会被替换成HelloWorld.vue内容

在这里<router-view/>和<HelloWorld/>效果是一样的

6、修改helloworld.vue内容如下

<template>
  <div class="hello">
    HelloWorld
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

7、界面如下

8、下面开始slot测试

(1)修改HelloWorld增加<slot>

<template>
  <div class="hello">
    HelloWorld
    <slot>11111111111</slot>
  </div>
</template>

(2)修改App.Vue

可见，会将定义中的bbbb覆盖掉子组件slot中的内容

（3）定义两个slot,可以发现两个都被替换

（4）给slot命名，slot将不受影响

（5）修改App.Vue,如下，插槽为a的被替换

(6)修改style,说明是将元素自身进行插槽

（7）定义一个具有slot特性值为c的元素，因为组件中不存在该插槽，将被抛弃。

如上，定义了name的叫做具名插槽，否则叫匿名插槽，可以这样理解，有name的插槽相当于有锁的房门，必须有对应的钥匙才能打开