vue.js笔记四

vue

字数统计: 651阅读时长: 3 min

 2021/05/25   Share

一、slot插槽

1、基本使用

<div id="app">
  <div>{{ message }}</div>
  <cpn><span>hehe</span></cpn>
  <cpn><button>hehe</button></cpn>
</div>
<template id="cpn">
  <div>
    <h2>测试</h2>
    <slot></slot>
  </div>
</template>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:"hello vue"
      },
      components:{
        cpn:{
          template:`#cpn`
        }
      }
  });
</script>

2、默认值

如果设定了默认值，则当没有值的时候，显示默认值，并且可以通过name属性修改某个默认值

<div id="app">
  <div>{{ message }}</div>
  <cpn><span slot="left">sss</span></cpn>
</div>
<template id="cpn">
  <div>
    <h2>测试</h2>
    <slot name="left">左边</slot>
    <slot>中间</slot>
    <slot>右边</slot>
  </div>
</template>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:"hello vue"
      },
      components:{
        cpn:{
          template:`#cpn`
        }
      }
  });
</script>

3、作用域

插槽中的数值在自己作用域中表示

<div id="app">
  <div v-show="isShow">{{ message }}</div>
  <npc></npc>
</div>
<template id="npc">
  <div>
    <h2 v-show="isShow">hhhh</h2>
  </div>
</template>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:"hello vue",
        isShow: true
      },

      components:{
        npc:{
          template:`#npc`,
          data(){
            return {
              isShow:false
            }
          }
        }
      }
  });
</script>

4、子插槽传递数值

<div id="app">
  <div>{{ message }}</div>
  <cpn>
<!--    目的是获取子组件中的planguage-->
    <template slot-scope="slot">
<!--      <span v-for="item in slot.data">{{item}}-</span>-->
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
<!--  通过：data属性将planguage传递给父值 data名字可以随便取-->
  <slot :data="planguage">
    <ul>
      <li v-for="item in planguage">{{item}}-</li>
    </ul>
  </slot>
  </div>

</template>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:"hello vue"
      },
      components:{
        cpn:{
          template:`#cpn`,
          data(){
            return {
              planguage:['no1','no2','no3']
            }
          }
        }
      }
  });
</script>

原文作者：30no2

原文链接：http://mr-9.github.io/2021/05/25/vue.js笔记四/

发表日期：May 25th 2021, 12:00:00 am

更新日期：May 25th 2021, 5:26:06 pm

Next Post

vue.js笔记五
Previous Post

vue.js笔记三

CATALOG

1. 一、slot插槽



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true