冒號：相當於參數，在組件里面用this.方法名(參數） 直接調用
@符號：相當於事件方法，需要用 this.$emit('方法名', "參數1"，"參數2"。。。)調用
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('myComponent', {
props: {
onFun1: { type: Function }
},
methods: {
componentFun1: function () {
if(this.onFun1)this.onFun1("冒號");
console.log("-component.fun1.冒號直接調用")
},
componentFun2: function () {
this.$emit('on-fun2', "@符號")
console.log("-component.fun1.@符號用$emit調用")
},
},
template: `<span><button @click="componentFun1">fun1</button><button @click="componentFun2">fun2</button></span>`
});
</script>
</head>
<body>
<div id="app">
<span>{{index}}</span>
<my-component :on-fun1="fun1" @on-fun2="fun2"></my-component>
</div>
<script>
var v1 = new Vue({
el: '#app',
data: {
index:0,
},
methods: {
fun1: function (v) {
this.index++;
console.log("-page.fun1."+v);
},
fun2: function (v) {
this.index++;
console.log("-page.fun2."+v);
},
}
})
</script>
</body>
</html>