vue父子组件传值和非父子组件之间的传值、插槽

1.父组件向子组件传值

父组件向子组件传值，通过属性的方式进行，子组件用props进行接收。

注意在这个传值过程中，有一个单向数据流规定，子组件不能直接修改父组件传递的值，因为如果父组件传递的值类型是引用类型的数据的话，在其他地方引用了这个值，那么子组件修改值得时候也会影响其他组件,如果一定要修改，可以复制一个副本，修改那个副本。

<div id="app"><counter :count="0"></counter></div>

<script>
 var counter = {
      props:['count'],
      data:function(){
        return {
          number:this.count//复制了一个副本，下面只需修改number，不再使用count
        }
      },
      template:'<div @click="handleClick">{{number}}</div>',
      methods:{
        handleClick:function(){
          this.number++
        },
      }
    }

 var vm = new Vue({
      el: "#app",
      components: {
        counter
      },
    })
</script>

2.子组件向父组件传值,通过$emit()给父组件传递一个事件，父组件监听这个事件

 <div id=app>
    <counter :count="0" @inc="handleInc"></counter>
    <counter :count="1" @inc="handleInc"></counter>
    <div>{{total}}</div>
  </div>

  <script>
    var counter = {
      props:['count'],
      data:function(){
        return {
          number:this.count
        }
      },
      template:'<div @click="handleClick">{{number}}</div>',
      methods:{
        handleClick:function(){
          this.number++
          this.$emit('inc',2)//可以后面携带很多个参数
        },
      }
    }

    var vm = new Vue({
      el:"#app",
      data:{
        total:1
      },
      components:{
        counter
      },
      methods:{
        handleInc:function(step){
          //alert(step)
          this.total+=step
        }
      }
    })
  </script>

3.非父子组件之间的传值

通过发布订阅模式传值，观察者模式，在vue中叫做总线机制

<div id=app>
    <child content='dell'></child>
    <child content='lee'></child>
  </div>



  <script>
//在vue的prototype上挂载一个bus的属性，属性指向vue实例，后面每个组件上都有bus的属性
    Vue.prototype.bus = new Vue()

    Vue.component('child', {
      data:function(){
        return {
          selfContent:this.content//单向数据流机制，赋值一个父组件值的副本
        }
      },
      props: {
        content: String
      },
      template: '<div @click="handleClick">{{selfContent}}</div>',
      methods: {
        handleClick: function () {
          // alert(this.content)
          this.bus.$emit('change',this.selfContent)
        }
      },
      mounted:function(){
          var this_ = this//这里的this作用域会发生变化，所以提前存储一下
          this_.bus.$on('change',function(msg){
            this_.selfContent = msg
          })
        }
    })


    var vm = new Vue({
      el: "#app",
    })
  </script>

4.slot的用法

<div id=app>
    <child>
      <div class="header" slot="header">header</div>
      <div class="footer" slot="footer">footer</div>
    </child>
  </div>

  <script>

    Vue.component('child', {
      template: `<div>
                    <slot name="header"></slot>
                    <p>dell</p>
                    <slot name="footer"></slot>
                  </div>`
    })

    var vm = new Vue({
      el: "#app",
    })
  </script>

5.slot-scope作用域插槽

<div id=app>
    <child>
      <template slot-scope="props">
          <!-- //props接收数据，模板可以直接读取数据 -->
          <li>{{props.item}}--hellp</li>
      </template>
    </child>
  </div>

  <script>

    Vue.component('child', {
      data: function () {
        return {
          list: [1, 2, 3, 4]
        }
      },
      template: 
      `
        <div>
          <ul>
           <slot v-for="item of list" :item=item></slot>//这里循环一个数据，:item=item是给父组件传递一个数据
          </ul>
        </div>
      `
    })

    var vm = new Vue({
      el: "#app",
    })