VUE3裡面 setup 的常用方法一覽

2021-10-22 19:43:25 字數 1380 閱讀 1966

比較常用的方法加注視一覽，我盡量寫簡單一點，通熟易懂，舉一反三



}<


/template>


import


from


'vue'


;export


default);


return;}


};<


/script>
ref 的返回值是乙個物件 注意使用.value屬性

}-


}<


/template>


import


from


'vue'


;export


default;}


};
provide


("datas"


,datas)


;
const datas =


inject


("datas");


//定義更改方法


constok=


()=>


}
import


from


'vue'


;export


default);


return;}


};
import from 『vue-router』

//跳轉


const router =


userouter()


;const


jump=(


)=>


const methods =


//資料


const route =


useroute()


; console.


log(route)
ctx相當於vue2的this, //但是特別注意ctx代替this只適用於開發階段，等你放到伺服器上執行就會出錯， //後來查閱資料說的得用proxy替代ctx，才能在你專案正式上線版本正常執行 let =getcurrentinstance();

main.js

import


from


'vant'


;use


(store)


.use


(router)


.use


(vuewechattitle)


.mount()


()=>{}


// 自定義新增
可以在setup裡使用裡

setup()

vue3之setup的使用理解

1 vue3中的setup有什麼用?setup的設計是為了使用組合式api 2 為什麼不用之前的元件的選項 data computed methods watch 組織邏輯在大多數情況下都有效。然而，當我們的元件變得更大時，邏輯關注點的列表也會增長。這可能會導致元件難以閱讀和理解，尤其是對於那些一開...

vue2裡面ref的具體使用方法

1 我們先定義兩個元件 html部分 js部分 vue.component n bar data function vue.component pagefooter data function 這裡怎麼直接訪問n bar的n s和pagefooter的footer值呢？這就用到ref了 2 ref的...

一些關於Vue3的更改和調整

距離vue3.0 bate 版正式發布已經1個月了。不過不需要擔心學不動的問題，因為現在vue3是完全相容vue2的，你可以在vue3中繼續使用vue2,甚至可以兩者一起使用。還有很重要的一點，vue2還會再更新乙個版本，讓大家能完美過渡到vue3。vue3對使用者來說最大的改變應該就是compos...