vue之組件（組件之間相互傳參）

1.全局注冊組件

Vue.component('button-cart',{
 data () {
  return {
    count: 1
  }
  },
  template: '<button @click="count++">{{ count }}</button>'
})
new Vue({el: '#app'})

　　組件中的data必須是一個函數

2. 局部注冊組件

    // 局部組件
    const Buttoncart = {
      template: '<button>局部的組件<button>'
    }
    new Vue({
      el: '#app',
      components: {
        Buttoncart
      }
    })

 // 另一種寫法  推薦
 <template id="cart">
    <div>呵呵噠
      <ul>
        <li>小王</li>
        <li>小麗</li>
      </ul>
    </div>
  </template>
    const Buttoncart = {
      template: '#cart'
    }
    new Vue({
      el: '#app',
      components: {
        Buttoncart
      }
    })

組件之間相互傳值

3.父組件給子組件傳值

　　父組件在調用子組件的地方，給它添加一個自定義屬性，這個自定義屬性的值就是父組件需要傳遞給子組件的值，如果這個值是一個變量的話需要用到綁定屬性，，，，在子組件的內部添加一個props,這個props就是用來描述接收父組件的值

　　props有三種寫法

　　1.數組的方法 props[data,flag]  數組元素就是自定義屬性名

　　2.對象方法 props:{ data: Array }   key值為自定義的屬性名，value值為數據類型

　　3.也是對象方法 props: { data: { type: Array, defualt: () { return [] } } }

　　　　key值為自定義的屬性名，value值為一個對象，在此對象下，第一個key為type,value值為數據類型，第二個key值為 default，value值為默認值，如果默認的數據是數組或者對象，需要使用函數，返回默認值

<div id="app">
    <Buttoncsrt></Buttoncsrt>
  </div>
  <script>
    const nav = {
      // 子組件
      props: {
        data: {
          type: Array,
          defualt: () => {
            // 如果是一個數組或者對象需要使用函數返回
            return []
          }
        }
      },
      template: '<div><P v-for="(item, index) of data" :key="index">{{ item }}</P></div>'
    }
    const Buttoncsrt = {
      // 父組件
      data () {
        return {
          list: [1,6,8,9]
        }
      },
      // 父組件調用子組件的地方
      template: '<my-body :data="list"></my-body>',
      components:{
        'my-body': nav
      }
    }
    new Vue({
      el: '#app',
      components: {
        Buttoncsrt
      }
    })

4.子組件給父組件傳值

　　在父組件調用子組件的地方，綁定自定義事件名的事件，此事件由父組件實現，注意綁定事件不加(),方法實現有默認參數,此參數的值就是子組件傳遞過來的值

<div id="app">
        <my-body></my-body>
    </div>
    <template id="nav">
        <div>
            則
            <button @click="senddata('111')">改變為111</button>
            <button @click="senddata('222')">改變為222</button>
            <button @click="senddata('333')">改變為333</button>
            <button @click="senddata('444')">改變為444</button>
        </div>
    </template>
    <template id="comp">
        <div>
            呵呵 {{ nun }}
            <!-- 啥也不寫設置了默認值的話顯示默認值 -->
            <my-nav @my-eve='getdata'></my-nav>
        </div>  
    </template> 
    <script>    
    // 在子組件中，通過某一個事件觸發，執行以下事件
  // this.$emit(自定義事件名, 傳遞的參數)
  // 在父組件調用子組件的地方，綁定 自定義事件名 的事件，此事件由 父組件實現，注意綁定事件不加(),方法實現有默認參數,此參數的值就是子組件傳遞過來的值
        var nav = { //子組件
            template: '#nav',
            methods: {
                senddata(val){
                    this.$emit('my-eve' , val)
                }
            }
        }
        var coent = {//父組件
            template: '#comp',
            data(){
                return {
                    list: [2,6,89,74,23],
                    nun : '111'
                }
            },
            components: {
                'my-nav': nav
            },
            methods: {
                getdata(val){
                    this.nun = val
                }
            }
        }
        var app = new Vue({
            el: '#app',
            components: {
                'my-body': coent
            }
        })
    </script>

5.非父子之間傳值

 

    <div id="app">
        <my-body></my-body>
        <my-nav></my-nav>
    </div>
    <template id="nav">
        <div>
            則
            <button @click="senddata('111')">改變為111</button>
            <button @click="senddata('222')">改變為222</button>
            <button @click="senddata('333')">改變為333</button>
            <button @click="senddata('444')">改變為444</button>
        </div>
    </template>
    <template id="comp">
        <div>
            呵呵 {{ nun }}
        </div>  
    </template> 
    <script>    
    // 非父子組件之間傳值 --- 中央事件總線
    // new Vue實例作為中央事件總監 const bus = new Vue()
    // 在需要傳遞數據的一方，通過以下代碼傳遞數據
    // bus.emit(自定義事件名, 傳遞的數據) // 在需要接受數據的一方，通過以下代碼接收數據 // bus.on(自定義事件名, function (val) {})
    const bus = new Vue()
    var nav = {
        template: '#nav',
        methods: {
            senddata(val){
              bus.$emit('my-eve' , val)
            }
        }
    }
    var coent = {
        template: '#comp',
        data(){
            return {
                list: [2,6,89,74,23],
                nun : '111'
            }
        },
        mounted () {
            bus.$on('my-eve', val => {
              this.nun = val
            })
        }
    }
    var app = new Vue({
        el: '#app',
        components: {
            'my-body': coent,
            'my-nav': nav
        }
    })
    </script>