Vue插槽

最新推荐文章于 2024-04-18 22:44:36 发布

TuMinQiang

最新推荐文章于 2024-04-18 22:44:36 发布

阅读量155

点赞数 1

分类专栏： vue 文章标签： js vue

本文链接：https://blog.csdn.net/qq_42132814/article/details/109816305

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

Vue插槽

什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

默认插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue包/vue.js"></script>
</head>

<body>
  <div id="app">
    <son>
      <template>
        <h2>我是默认插槽的内容</h2>
      </template>
    </son>
  </div>
  <template id="box">
    <div>
      <h1>默认插槽</h1>
      <slot></slot>
    </div>
  </template>
  <script>
    const son = {
      template: '#box',
      data() {
        return {}
      }
    }
    const vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      components: {
        son
      }
    })
  </script>
</body>

</html>

默认插槽

具名插槽

具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue包/vue.js"></script>
</head>

<body>
    <div id="app">
        <son>
            <template v-slot:one>
                <h2>我是具名插槽的内容1</h2>
            </template>
            <template v-slot:two>
                <h2>我是具名插槽的内容2</h2>
            </template>
        </son>
    </div>
    <template id="box">
        <div>
            <h1>具名插槽1</h1>
            <slot name='one'></slot>
            <h1>具名插槽2</h1>
            <slot name='two'></slot>
        </div>
    </template>
    <script>
        const son = {
            template: '#box',
            data() {
                return {}
            }
        }
        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                son
            }
        })
    </script>
</body>

</html>

具名插槽

作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue包/vue.js"></script>
</head>

<body>
    <div id="app">
        <son>
            <template v-slot='{user,form}'>
                {{user}}-----
                {{form}}
            </template>
        </son>
    </div>
    <template id="box">
        <div>
            <slot :user='user' :form='form'></slot>
        </div>
    </template>
    <script>
        const son = {
            template: '#box',
            data() {
                return {
                    user: 'user',
                    form: {
                        name: 'tu',
                        age: 18
                    }
                }
            }
        }
        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                son
            }
        })
    </script>
</body>

</html>