Vue中的插槽和自定义指令

最新推荐文章于 2024-05-28 16:45:45 发布

从明天开始好好学习前端

最新推荐文章于 2024-05-28 16:45:45 发布

阅读量903

点赞数 19

文章标签： vue.js javascript 前端前端框架 ecmascript

本文链接：https://blog.csdn.net/l12345666777/article/details/135156639

版权

一、插槽

父组件传递模板给子组件，子组件使用插槽声明slot元素承载分发内容出口。

1.默认插槽

父组件提供给子组件模板，默认会填充到默认插槽中

slot不设置name会隐式创建一个name为default的插槽

<slot name='default'></slot>

2.具名插槽

父组件提供了具体的模板，填充到具名插槽中

指定模板填充到具名插槽中 v-slot绑定具名插槽名称可以简写为#

<template v-slot:header></template>

<slot name='header'></slot>

默认插槽和具名插槽的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-child>
      <div>我是父组件提供的模板{{msg}}</div>
      <img width="150px" src="../../Axure/swipe/1.jpeg" alt="">
      <!-- <template v-slot:header> -->
      <template #header>
        <div>
          我是头部的内容
        </div>
      </template>
      <template v-slot:footer>
        <div>
          我是底部的内容
        </div>
      </template>
    </my-child>
  </div>
  <script>
    let myChild = {
      data(){
        return {
          child:'我是子组件',
          user:{
            firstName:'zhao',
            lastName:'terry'
          }
        }
      },
      template:`
        <div>
          {{child}}
          <slot name='default'></slot>  
          <header>
            <slot name='header'></slot>  
          </header>
          <footer>
            <slot name='footer'></slot>  
          </footer>
        </div>
      `
    }
    new Vue({
      el:"#app",
      // 局部注册组件
      components:{
        'my-child':myChild
      },
      data:{
        msg:'hello vue2'
      },
      methods:{

      }
    })
  </script>
</body>
</html>

3.作用域插槽

父组件作用域使用子组件数据

父级作用域模板中获取子组件中数据子组件向父组件传值第二种方式

1.在子组件默认插槽中动态绑定插槽prop

<slot v-bind:user='user'>

2.在父组件模板中使用v-slot='插槽prop'接收子组件数据

<template v-slot='scope'>

{{scope.user.xxxx}}

</template>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-child>
      <template v-slot="scope">
        <div>
          {{scope.user.lastName}}
        </div>
      </template>
    </my-child>
  </div>
  <script>
    /**
     * 作用域插槽：
     *  父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式
     *  1.默认插槽使用v-bind绑定插槽prop
     *  2.在父组件作用域中使用v-slot接收插槽prop
    */
    let myChild = {
      data(){
        return {
          child:'我是子组件',
          user:{
            firstName:'zhao',
            lastName:'terry'
          }
        }
      },
      template:`
        <div>
          {{child}}
          <slot v-bind:user='user'>{{user.firstName}}</slot>
        </div>
      `
    }
    new Vue({
      el:"#app",
      // 局部注册组件
      components:{
        'my-child':myChild
      },
      data:{
        msg:'hello vue2'
      },
      methods:{

      }
    })
  </script>
</body>
</html>