Vue -实际项目插槽使用（十二）

slot在原来的父组件基础上增强功能或扩展功能,在子组件里面预留的插槽可以添加要显示的功能，使用技巧：slot封装一些相同不变的功能，方便使用。

具名插槽

一、创建一个子组件，使用<slot name="a" />标签，套上要显示的默认元素，这个默认元素，如果父组件里面没有调用这个selot插槽，则默认显示子组件里面的元素。

子组件HelloWorld9

<template>
  <div>
    <slot name="a"><h1>子组件默认功能1</h1></slot>
    <slot name="b"><h1>子组件默认功能2</h1></slot>
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
  export default {
    name: "HelloWorld9",
    data() {
      return {
        msg:'子组件9',
      }
    }
  }
</script>
<style scoped>
</style>

HelloWorld9父组件
在父组件往子组件插入功能，匿名插槽 不使用名字，会覆盖其它插槽，

<template>
  <div>
    <h2>{{msg}}</h2>
    <!--    <hello-world9></hello-world9>-->
    <!-- 不使用名字，在父组件往子组件插入功能，会覆盖其它功能 -->
    <hello-world9>
      <button slot="a">子组件按钮增强功能</button>
    </hello-world9>
  </div>
</template>

<script>
  import HelloWorld9 from "./HelloWorld9";
  export default {
    components: {HelloWorld9},
    name: "HelloWorld8",
    data() {
      return {
        msg: '父组件8'
      }
    }
  }
</script>
<style scoped>
</style>

二、作用域插槽

在子组件里面的插槽套上标签的元素，元素中数据修改只能在子组件修改，界面是在父组件显示。

现在的要求是在父组件里面修改展示方式，注意数据是不能在父组件修改的

子组件中声明slot 标签套上要展示的元素，并且在slot标签上绑定：变量名 = 变量值。

此变量名要在父组件中点.出来

子组件

<template>
  <div>
    <slot  :dataUser="dataArr">
      <ui>
        <li v-for="item in dataArr"> {{item}}</li>
      </ui>
    </slot>
  </div>
</template>
<script>
  export default {
    name: "HelloWorld9",
    data() {
      return {
        msg: '子组件9',
        dataArr: ['liyongbo', 'bobo', 'bo', '子组件数据'],
      }
    }
  }
</script>
<style scoped>
</style>

父组件中 template 标签套上要展示的元素，在2.5以上可以是元素，一定要在标签上起名字 slot-scope="user" 此名可以随便起，里面的元素通过user.dataUser ，点出子组件中声明的变量名 ：

其实v-bind：变量名 = 变量引用 ，可以看做 b赋值给a 操作 a = b ，b这边就可以有表达式动态计算，来改变页面。就得出结论，只能在代码里面计算，不能在页面中根据输入计算，此时要用到v-model
父组件

<template>
  <div>
    <h2>{{msg}}</h2>
    <hello-world9>
    <template slot-scope="user">
      <h1 v-for="item in user.dataUser">{{item}}</h1>
    </template>
    </hello-world9>
  </div>
</template>

<script>
  import HelloWorld9 from "./HelloWorld9";
  export default {
    components: {HelloWorld9},
    name: "HelloWorld8",
    data() {
      return {
        msg: '父组件8'
      }
    }
  }
</script>
<style scoped>
</style>

此时样式前面点.改变了