當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue3.0js 非prop属性的值和setup函数的使用

發布時間：2024/1/23 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue3.0js 非prop属性的值和setup函数的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

非prop屬性的值
一個非 prop 的 attribute 是指傳向一個組件，但是該組件并沒有相應 prop 定義的 attribute。

因為顯式定義的 prop 適用于向一個子組件傳入信息，然而組件庫的作者并不總能預見組件會被用于怎樣的場景。這也是為什么組件可以接受任意的 attribute，而這些 attribute 會被添加到這個組件的根元素上。

例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的 bootstrap-date-input 組件，這個插件需要在其 input 上用到一個 data-date-picker attribute。我們可以將這個 attribute 添加到你的組件實例上：

然后這個 data-date-picker=“activated” attribute 就會自動添加到的根元素上。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next"></script><style>.bg1 {background: #C1FFE4;}.bg2 {width: 120px;;}</style> </head><body><div id="app"><input-con class="bg2" type="password"></input-con></div><script>const vm = Vue.createApp({});vm.component('input-con', {// template: '<input class="bg1"',template: '<input class="bg1" type="text"',inheritAttrs: false, //不會繼承外部組件的屬性；，即password不會覆蓋text});//在指定的dom上裝載應用程序;vm.mount('#app');</script> </body></html>

Vue3 中的setup 一種是setup函數，一種是script setup
setup函數
setup函數原理說明
由于setup 是在beforeCreate 和 create 生命周期階段，組件還沒有創建，即還沒有進入 data 方法階段。
setup 返回的結果集作為 (傳統寫法)data 和 method 的值，確切點說是綁定到組件對象的屬性。

setup函數特性
1、setup函數是處于生命周期函數 beforeCreate 和 Created 兩個鉤子函數之間的函數也就說在 setup函數中是無法使用 data 和 methods 中的數據和方法的
2、setup函數是 Composition API（組合API）的入口
3、在setup函數中定義的變量和方法最后都是需要 return 出去的不然無法再模板中使用

setup 函數將接收兩個參數，props&context
Props ：props接收父組件傳入的值，為Proxy對象，且為響應式，所以不能使用 ES6 解構，它會消除 prop 的響應性

setup 包含的生命周期
onBeforeMount——掛載開始前調用
onMount——掛載后調用
onBeforeUpdate——當響應數據改變，且重新渲染前調用
onUpdated——重新渲染后調用
onBeforeUnmount——Vue實例銷毀前調用
onUnmounted——實例銷毀后調用
onActivated——當keep-alive組件被激活時調用
onDeactivated——當keep-alive組件取消激活時調用
onErrorCaptured——從子組件中捕獲錯誤時調用

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>setup函數的案例</title><script src="https://unpkg.com/vue@next"></script> </head><body><div id="app"><post-item :post-content="content"></post-item></div><script>//創建一個應用程序案例;const vm = Vue.createApp({data() {return {content: '越來越細'}}});//創建組件;vm.component('PostItem', {//聲明propsprops: ['postContent'],setup(props) {Vue.watchEffect(() => {console.log(props.postContent);});},template: '<h3>{{ postContent }}</h3>',});//在指定的DOM元素上裝載應用程序實例的根組件;vm.mount('#app');</script> </body></html> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue3.0js 非prop属性的值和setup函数的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue3.js 全局组价案例入门
下一篇： Vue3之——和Vite不得不说的事