vue基础语法

插槽的基本语法

简单介绍一下什么叫做插槽?

插槽就像是在房屋装修的时候安放的预留线盒,他什么都不干就是这个位置,当有需要的时候就会被其他的插座,替换这就是它的使命.

插槽也一样,他也是占个位置,等待被其他的标签,组件替换掉.

插槽的使用

定义插槽

安放一个插槽(预留线盒)

​
Vue.component("Parent",{template:
      '<div>\
          //默认插槽
        <slot></slot>\
          //具名插槽(插槽过多分不清,起个名字进行区分)
        <slot name="main"></slot>\
          //一个名为footer的插槽,并赋予默认值(当不对插槽进行提供内容的时候他就会显示自身的默认值)
        <slot name="footer">我是footer</slot>\
      </div>'})

插槽的使用

使用其他的组件或是标签替换插槽

<div id="app">
    <Parent>
        <h1>我是header</h1>
        <h1 slot="main">我是mian</h1>
    </Parent>
</div>

显示结果:

1. 因为没有对第一个slot进行取名,所以他会用被其他slot使用的剩余内容标签替换自身,

2. 第二个h1标签中的slot="main"的意思是这个插槽替换name="main"的插槽,

3. 第三个标签我们并没有对他进行赋予内容,因为他有自己的值所以在没有赋予内容的情况下他会显示自己的信息

 

修改演示

<Parent>
    <h1>我是header111</h1>
    <h1 slot="main">我是mian</h1>
    <h1>我是header222</h1>
    <h1 slot="footer">我是footer</h1>
</Parent>
​
​
 Vue.component("Parent",{template:
      '<div>\
        <slot name="main"></slot>\
        <slot></slot>\
        <slot name="footer">我是footer</slot>\
      </div>'})

我们可以见到不论默认插槽(没有其名字的slot)会使用被其他slot使用的剩余内容或是标签替换自身

就简单demo演示

<div id="app">
    <Parent>
         <div>
          个人信息
        </div>
        
      <template #name>
        <child-name name="王富贵"></child-name>
      </template>
        
      <template v-slot="age">
        <child-age age="18"></child-age>
      </template>
      
    </Parent>
  </div>
​
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
      //定义个个名称显示组件
    Vue.component("child-name", { template: '<div> {{name}}</div>', props: ['name'] })
      //定义个个年龄显示组件
    Vue.component("child-age", { template: '<div> {{age}}</div>', props: ['age'] })
      //定义一个父组件,并使用具名插槽
    Vue.component("Parent", {
      template:
        '<div>\
        <slot name="name"></slot>\
        <slot name="age"></slot>\
        <slot></slot>\
      </div>'})
    const vm = new Vue({
      el: '#app',
    });
  </script>

在这次demo演示中我们见到了几个新的API和标签template,v-slot

• 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

• 而#正是v-slot的语法糖