Vue slot 插槽

Vue 的插槽感觉上是一个组件函数，和函数一样进行参数的传递来改变组件的据题内容。

使用指令：v-slot

//插口的基本使用

<body>
  <div id="app">
    <!-- 传入元素参数 -->
    <login><span>demo</span></login>
  </div>
</body>

<template id="login">
  <div>
    <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数-->
    <slot><h3>heee</h3></slot>
  </div>
</template>

<script>
  const login = {
    template:"#login"
  }
   new Vue({
     el:"#app",
      components:{
        login
      }
   })


</script>

当要有多个插口时，各个插口是如何分辨插口的内容的。

<body>
  <div id="app">
    <!-- 传入元素参数 -->
    <login>
　　//必须通过template进行包裹 使用v-slot命令进行具名分析
      <template v-slot:name1>
          <span >demo1</span>
      </template>
      <template v-slot:name2>
          <span>demo2</span>
      </template>
      <template v-slot:name3>
          <span >demo3</span>
      </template>
    </login>
  </div>
</body>

<template id="login">
  <div>
    <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数-->
    <slot name="name1"><h3>插口1</h3></slot>
    <slot name="name2"><h3>插口2</h3></slot>
    <slot name="name3"><h3>插口3</h3></slot>
  </div>
</template>

<script>
  const login = {
    template:"#login"
  }
   new Vue({
     el:"#app",
      components:{
        login
      }
   })


</script>
//感觉上和命名视图相类似的使用

// 编译作用域

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为 "/profile" 是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
在template元素中使用的属性只能在tempalte中 外部是无法访问到的。
</navigation-link>

//父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

//子组件的数据显示样式改变 不是默认的显示模式

<body>
  <div id="app">
    <!-- 传入元素参数 -->
    <login>
      <!-- 绑定的数据是将上就是子组件中的数据 但是 只是可以改变数据的输出样式 也就是父组件替换插槽的标签  内容还是由子组件提供 -->
      <template v-slot:default="slotProps">
       ----{{slotProps.user.uel}}
      </template>
    </login>
  </div>
</body>

<template id="login">
  <div>
    <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数-->
    <slot v-bind:user="user">{{user.name}}</slot>
  </div>
</template>

<script>
  const login = {
    template:"#login",
    data:function(){
      return {
        user:{
          name:"xiaoming",
          uel:"ddd"
        }
      }
    }
  }
   new Vue({
     el:"#app",
     data:{

     },
      components:{
        login
      }
   })


</script>