vue教程——09 组件化进阶

最新推荐文章于 2024-07-12 09:36:48 发布

Dormiveglia-flx

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量152

点赞数

分类专栏： Vue教程文章标签： vue js javascript html5 vue.js

本文链接：https://blog.csdn.net/sugerfle/article/details/115917947

版权

Vue教程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue教程——09 组件化进阶

一 slot-插槽的基本使用。

插槽的具体作用：在组件内部，定制化自己喜欢的内容。

二插槽的具体用法

具名插槽

可以让插槽按指定的顺序填充，而没有具名的插槽是按照你填充的顺序排列的，而具名插槽可以自定义排列

<!-- 父组件 -->
  <div id="app">

    <cpn>
      <span>没具名</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>
    </cpn>


  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
   
        }
      },
    }
    const app = new Vue({
      el: "#app",
      data() {
        return {
         
        }
      },
      components: {
        cpn
      },
    })
  </script>

结论：

1 定义具名插槽，使用`name`属性，给插槽定义一个名字。

2 使用具名插槽，在自定义组件标签内使用`slot="left"`，插入指定插槽

3 三种写法，获取指定插槽。

三组件的作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件的作用域</title>
</head>
<body>
  <!-- 父组件 -->
  <div id="app">
    <!-- 使用的vue实例作用域的isShow -->
    <cpn v-show="isShow"></cpn>
  </div>
<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <h2>子组件</h2>
      <!-- 组件作用域，使用的子组件的作用域 -->
      <button v-show="isShow"></button>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          isShwo:false
        }
      },
    }
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "父组件",
          isShow:true
        }
      },
      components: {
        cpn
      },
    })
  </script>
</body>

</html>

四作用域插槽案例 v-slot

作用域插槽具体用法是干啥的？
请看：https://blog.csdn.net/qwq1503/article/details/105092342/

简单总结一下文章所写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作用域插槽案例</title>
</head>

 <div id="root">
        <child></child>
        <child></child>
    </div>
    <script>
        Vue.component('child',{
            data: function(){
                return {
                    list:[1,2,3,4]
                }
            },
            template: '<div><ul><li v-for="value in list">{{value}}</li></ul></div>',
        })
        var vm=new Vue({
            el: '#root'
        })
    </script>

</html>

调用两遍子组件，显示的值肯定是一样的

调用了两次child组件，因为调用的是同一个子组件，所以显示的内容完全一样。如何在每次调用时能有各自的渲染效果？这就是作用域插槽的用武之地。

<div id="root">
        <child>
            <template v-slot:testslot="scope"><!--定义一个插槽，该插槽必须放在template标签内-->
                <li>{{scope.value}}</li> <--!定义使用渲染方式-->
            </template>
        </child>
        <child>
            <template v-slot:testslot="scope">
                <h1>{{scope.value}}</h1><!--定义不同的渲染方式-->
            </template>
        </child>
    </div>
    <script>
        Vue.component('child',{
            data: function(){
                return {
                    list:[1,2,3,4]
                }
            },
            template: `<div>
                            <ul>
                                <slot name = "testslot"  v-for="value in list" :value=value>//使用slot占位
                                </slot>
                            </ul>
                        </div>`
        })
        var vm=new Vue({
            el: '#root'
        })
    </script>

 总结：由于组件有作用域，父组件有父组件的作用域，子组件也是，所以数据在不传值的情况下，是不互通的。
 
 这样，每次复用的子组件都一模一样，没法达到各自渲染的效果。
 
 这时，用插槽作用域可以解决这个问题，可以在父组件的地方，获取到子组件的数据，重新渲染。

Dormiveglia-flx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue教程——09 组件化进阶

vue笔记——09 组件化进阶一 slot-插槽的基本使用。二插槽的具体用法三组件的作用域四作用域插槽案例 v-slot一 slot-插槽的基本使用。插槽的具体作用：在组件内部，定制化自己喜欢的内容。二插槽的具体用法具名插槽可以让插槽按指定的顺序填充，而没有具名的插槽是按照你填充的顺序排列的，而具名插槽可以自定义排列 <div id="app"> <cpn> <span
复制链接

扫一扫