<div id="app">
        <p>數(shù)字： {{number}}</p>
        <button @click="plusOne(rand1,$event)">點一下加2</button>
        <customize-btn  @click.native="minus(rand2)"  ></customize-btn>
    </div>
    <script type="text/javascript">
    var rand1=Math.random()*10;
    var rand2=Math.random()*10;
    var customizeBtn = {
        data: function() {
            return { btnClass: "btn" }
        },
        template: ` <div :class="btnClass">這是一個自定義的組件，讓它擁有點擊事件能力，就像個按鈕</div>  `,
    }
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello world',
            number: 3,
            rand1:rand1,
            rand2:rand2
        },
        methods: {
            plusOne: function(num, a) {
               console.log(rand1);
                this.number = this.number + num;
                console.log("隨機增加一個數(shù)后的：" + this.number);
                this.rand1=Math.random()*10;
                return this.number;
            },
            minus: function(num) {
                console.log(rand2);
                this.number = this.number - num;
                console.log("隨機減去一個數(shù)后的：" + this.number);
                 this.rand2=Math.random()*10;
                return this.number;
            }
        },
        components: {
            "customizeBtn": customizeBtn
        }
    })
    </script>

發(fā)現(xiàn)下面幾個情況：

1.事件監(jiān)聽和樣式屬性綁定都直接寫在組件標(biāo)簽上

<customize-btn  @click.native="minus(rand2)" :class="btnClass" ></customize-btn>

報錯btnClass未定義

2.事件監(jiān)聽和樣式屬性綁定都直接寫在tempalet里面

template: ` <div  @click.native="minus(rand2)" :class="btnClass">這是一個自定義的組件，讓它擁有點擊事件能力，就像個按鈕</div>  `,

不報錯，但是第二個按鈕點擊無效，事件沒綁上

3.事件監(jiān)聽寫在template，樣式屬性綁定寫在組件標(biāo)簽上

<customize-btn  :class="btnClass" ></customize-btn>
template: ` <div  @click.native="minus(rand2)">這是一個自定義的組件，讓它擁有點擊事件能力，就像個按鈕</div>  `,

報錯，btnClass未定義

4.第三種就是最前面的那樣。事件監(jiān)聽寫在組件標(biāo)簽上，樣式屬性綁定寫在template里,這里正常。

<customize-btn  @click.native="minus(rand2)"></customize-btn>
template: ` <div :class="btnClass">這是一個自定義的組件，讓它擁有點擊事件能力，就像個按鈕</div>  `,

從結(jié)論看，自定義組件的事件監(jiān)聽必須寫在組件標(biāo)簽上，而自定義組件的樣式屬性（包括其他屬性？）綁定必須在template里面？ 這個結(jié)論對不對呢？為什么呢？