vue方法理解

这里是对官方文档的一点自我解读

首先是简单版本的

    <h3>简单版本——tag可以回调sayHi</h3>
    <div id="emit-example-simple">
        <welcome-button v-on:welcome="sayHi"></welcome-button>
    </div>
    
   <template id="template">
        <button v-on:click="$emit('welcome')">
            Click me to be welcomed
        </button>
    </template>
    <script>
	  Vue.component('welcome-button',{
	            template:template,
	        })
	   new Vue({
           el:"#emit-example-simple",
           methods:{
               sayHi:function(){
                   alert('Hi')
               }
           }
       })      
    </script>

• 首先要明确一点：在new Vue里面的methods是在点击button一定会执行的
• v-on是用来监听返回的数据，可能会有别的用途

看第二个版本

    <template id="complex">
        <button v-on:click="giveAdvice">
            Click me for advice
        </button>
    </template>
    <script>
            Vue.component('magic-eight-ball',{
            data:function(){
                return{
                    possibleAdvice:['Yes','No','Maybe']
                }
            },
            methods:{
                giveAdvice:function(){
                    var randomAdviceIndex=Math.floor(Math.random()*this.possibleAdvice.length)
                    this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
                }
            },
            template:complex
        }); 
      new Vue({
           el:"#emit-example-argument",
           methods:{
               
               showAdvice:function(advice){
                   alert(advice);
               }
           }
       })           
    </script>

• 先看new Vue 里面的代码 传入了一个数据advice 这就是来自于emit的值 而且他的命名可以任意，A,BC都可以
• 再看component里面的methods

<script>
 this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
 </script>

对应着应该是文档里的event-name 和参数——也就是上面advice会接受到的的值