Vue学习笔记（四）插槽、多级组件数据传递

八、插槽

• 8.1 匿名插槽
  插槽就是在组件中预留一个位置，在使用组件时可以给组件追加一些内容。插槽可以指定默认数据，如果使用者没有使用插槽就显示默认内容。在组件中写了几个匿名插槽，使用者填充的数据就会显示几份
• 8.2 具名插槽
  在定义插槽时可以给插槽指定name属性 < slot name=“插槽名称”>，指定了name属性的就是具名插槽。在使用时需要写上slot属性 < div slot=“插槽名称”>，才会把追加的内容插入到对应插槽中。不写slot属性会追加给匿名插槽
• 8.3 v-slot指令
  除了可以用slot属性来指定内容要放在哪一个插槽中外，还可以使用v-slot指令，v-slot指令只能用于template标签。< template v-slot=“插槽名称”>…< template/>
  v-slot也可以写成 #插槽名称

<div id="app">
   <cpn>
     <div>我是使用者添加的内容啦啦啦</div>
     <div slot="one">我是添加在插槽一中的内容啦啦啦</div>
     <template v-slot="two">
     	<div>我是添加在插槽二中的内容啦啦啦</div>
     </template>
   </cpn>
</div>
<template id="cpn">
  <div>
    <p>我是组件头部</p>
    //slot就是插槽
    <slot></slot>
    <slot name="one"></slot>
    <slot name="two"></slot>
    <p>我是组件底部</p>
  </div>
</template>
<script>
  Vue.component('cpn',{
     template: "#cpn"
  });
    let vue = new Vue({
        el: '#app',
    });
</script>

• 8.4 作用域插槽
• 什么是作用域插槽？
  作用域插槽就是带数据的插槽，就是让父组件在填充子组件内容的时候也能使用子组件的数据
• 如何使用作用域插槽？
  在slot中通过 v-bind:数据名称=“数据名称” 方式暴露数据
  在父组件中通过 < template slot-scope=“作用域名称” > 接收数据
  可以通过v-slot来替换slot-scope，< template v-slot:插槽名称=“作用域名称” >
  在父组件中的< template></ template > 中通过 作用域名称.数据名称 来使用数据
• 作用域插槽应用场景：子组件提供数据，父组件负责渲染

九、多级数据传递

• 在vue中，如果有父组件，子组件1，子组件2，要把子组件1中的数据传递给子组件2，那么要先把数据传递给父组件，再从父组件传递给子组件2。兄弟组件和隔代组件都不能直接传递数据，要逐级传递。
• 如以下情况，son2组件有一个input输入框，点击增加 / 减少按钮input中绑定的count会随之增加 / 减少。需求：在son2组件中展示son1中的count数据。

1. 把son1的count传递给farther组件。在farther组件中定义一个num和方法change()，把change()绑定给son1组件，son1组件在触发增加 / 减少事件时向父组件发送事件，并把count传递给父组件， this.$emit(‘par’, this.count); 父组件中的num保存count
2. 在父组件中给son2传递保存了count的num，:par-num=“num”，在son2组件中通过porps接收parNum(命名注意点)，这样在son2组件中就可以使用son1中的count数据了！

<div id="app">
    <farther></farther>
</div>
<template id="farther">
  <div>
    <p>{{num}}</p>
    <son1 @par="change"></son1>   //把count从son1传递给farther组件
    <son2 :par-num="num"></son2>  //把count从farther传递给son2组件
  </div>
</template>
<template id="son1">
  <div>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <input type="text" :value="count">
  </div>
</template>
<template id="son2">
  <div>
    <p>{{ parNum }}</p>   //使用传递过来的数据
  </div>
</template>
<script>
  Vue.component('farther',{
      template: "#farther",
      data(){
          return{
              num: 0
          }
      },
      methods:{
        change(curCount){
            this.num  = curCount;
        }
      },
      components: {
          'son1': {
              template: "#son1",
              data(){
                  return{
                      count: 0
                  }
              },
              methods:{
                  increment(){
                      this.count++;
                      this.$emit('par', this.count)
                  },
                  decrement(){
                      this.count--;
                      this.$emit('par',this.count)
                  }
              }
          },
          'son2': {
              template: "#son2",
              props:['parNum']
          }
      }
  });
    let vue = new Vue({
        el: '#app',
    });
</script>

以上就是多级组件的数据传递，非常麻烦！有没有方法可以使多级组件的数据和方法传递变得简单呢？有！！就是接下来要学的Vuex !