vue元件:和@區別冒號和@符號區別

阿新 • • 發佈：2022-02-07

冒號：相當於引數，在元件裡面用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>

歡迎加入JAVA技術交流QQ群：179945282

歡迎加入ASP.NET(C#)交流QQ群：17534377

vue元件:和@區別冒號和@符號區別

冒號：相當於引數，在元件裡面用this.方法名(引數）直接呼叫 @符號：相當於事件方法，需要用this.$emit(\'方法名\', \"引數1\"，\"引數2\"。。。)呼叫

Vue元件的巢狀和通訊

技術標籤：vuevue 文章目錄 01.元件巢狀02.元件通訊03.父元件傳參給子元件05.子元件傳參給父元件

Vue元件間傳值和訪問

1、根元件向子元件傳值：使用props屬性 <html> <body> <script src=\"vue.js\"></script>

Vue元件間的通訊和訊息訂閱

元件的自定義事件 1.一種元件間通訊的方式，適用於：子元件 ==> 父元件 2.使用場景：A是父元件，B是子元件，B想給A傳資料，那麼就要在A中給B繫結自定義事件（事件的回撥在A中)。

vue元件的一點探索和思考

文章不易，請關注公眾號毛毛蟲的小小蠟筆，多多支援，謝謝來源和問題在新增主機和修改密碼的彈窗中，都有相同的“測試連通及硬體檢測”的功能。

vue元件name的作用和路由name的作用

元件的作用：指定name選項的另外一個好處是便於除錯有名字的元件有更友好的元件資訊

[轉]vue屬性加冒號“：”和不加冒號“：”的區別

檢視Vue的API文件時我們會發現冒號“：”其實是v-bind的縮寫。冒號後面為變數，會動態變化的值；一般屬性後面為常量

詳談vue中router-link和傳統a連結的區別

Vue-router是伴隨著Vue框架出現的路由系統，它也是公認的一種優秀的路由解決方案。在使用Vue-router時候，我們常常會使用其自帶的路徑跳轉元件Link,通過實現跳轉，這和傳統的何其相似！但它們到底有什麼具體的區別呢

Vue之計算屬性Computed和屬性監聽Watch，Computed和Watch的區別

一、計算屬性（computed） 1.計算屬性是為了模板中的表示式簡潔，易維護，符合用於簡單運算的設計初衷。

Vue 中怎麼自定義指令， Vue 中怎麼自定義過濾器， NextTick 是做什麼的，Vue 如何去除url中的，computed 和事件 methods 有什麼區別

全域性註冊區域性註冊 Vue 中怎麼自定義過濾器可以用全域性方法Vue.filter()註冊一個自定義過濾器，它接收兩個引數：過濾器ID和過濾器函式。過濾器函式以值為引數，返回轉換後的值

vue之this.$router.query和this.$router.params的使用與區別

一 this.$router.query的使用： 1router/index.js 1{ 2path:\'/mtindex\', 3component: mtindex, 4//新增路由

vue.js 兩個等號 == 和三個等號 ===的區別

技術標籤：# vue == 用於比較兩者是否相等，忽略資料型別。 === 用於更嚴謹的比較，值和值的資料型別都需要同時比較

對比jQuery和Vue.js實現導航板塊方法的區別

網頁中經常會有類似這種的版塊：它的功能需求是：上方一行導航，下方的內容會根據上方導航變化。

Vue.js中計算屬性和方法的區別

技術標籤：vue.js computed和methods 計算屬性是基於它們的響應式依賴進行快取的。方法不是基於響應式依賴。每修改相關響應式值時，呼叫方法將總會再次執行函式。當修改相關響應式值時，基於響應式依賴的值會隨之

踩坑，vue router-link和a標籤的本質區別

問題現象首頁的標題跳轉，沒有進入規定的路由，而是被當做異常路由接收了

vue-Router的hash模式和history模式的區別

vue-Router的hash模式和history模式 hash模式 hash模式是早期的前端路由，由location.hash實現。

vue.js中methods watch和computed的區別示例詳解

目錄前言介紹一、作用機制上二、從性質上三、watch和computed的對比四、methods不處理資料邏輯關係，只提供可呼叫的函式五、從功能的互補上看待methods,watch和computed的關係六、利用computed處理watch在特定情況下

vue中請求攔截器和路由守衛的區別？

以下路由導航守衛和axios攔截，僅提供參考 1. 導航守衛：攔截元件導航守衛就是我們進行某些頁面的時候需要判斷當前使用者是否登入過，如果登陸過，則可以跳轉，否則重定向到登入頁面

[轉]vue專案啟動時，npm run serve 和 npm run dev 的區別

npm run serve 和 npm run dev 的區別在我們執行一些 vue 專案的時候，輸入npm run serve或者 npm run dev的其中一個時，系統會報錯：

Vue路由中的hash和history模式的區別及原理

Vue路由中的hash和history模式的區別及原理眾所周知、vue-router 具有hash、history兩種路由模式。以Vue3為列