关于对Vue中slot插槽理解

关于slot插槽理解

1.何时需要使用插槽

在开发中，我们需要将共性内容抽取到组件中，将不同的暴露为插槽。
插槽的益处便是，一旦预留了插槽，使用者便可以根据自己的需求来决定插槽中插入的的内容

2. slot的基本使用

<div id='app'>
    <my-cpn></my-cpn>
    <my-cpn>
      <p style="color: red;">我是替换的内容</p>
    </my-cpn>
  </div>
  <template id="myCpn">
    <div>
      <slot>我是插槽中默认的内容</slot> 
    </div>
  </template>
  <script src="vue.js"></script>
  <script>
    Vue.component('my-cpn',{
      template:'#myCpn'
    })

    let app = new Vue({
      el: '#app',
    })
  </script>

根据上面这代码其运行出来的结果如下：

1.插槽基本使用：在组件中定义一个< slot>< /slot>
2.在插槽中预留默认值
3.如果有多个值同时放入组件进行替换，可一起作为替换元素

具名插槽

在这个使用时只需要给slot元素一个name属性即可

<div id='app'>
    <my-cpn></my-cpn>
    <my-cpn>
      <span slot="left" style="color: red;">我是替换的内容</span>
    </my-cpn>
  </div>
  <template id="myCpn">
    <div>
      <slot name='left'>我是左侧</slot> 
      <slot name='center'>我是中间</slot> 
      <slot name='right'>我是右侧</slot> 
    </div>
  </template>
  <script src="vue.js"></script>
  <script>
    Vue.component('my-cpn',{
      template:'#myCpn'
    })

    let app = new Vue({
      el: '#app',
    })
  </script>

上述代码运行结果如下：

编译作用域

官方给出一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
可根据如下来进行理解：

作用域插槽

当父组件需要对子组件中data中的信息进行编辑时，便需要用到作用域插槽。
有了上面对于 编译作用域 的简单介绍也大致了解了父组件是无法直接访问和获取子组件中data属性的。可以根据一下方法进行访问并对其进行编辑等：