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的插槽相当于有锁的房门，必须有对应的钥匙才能打开