我們可以使用暴露方法回傳其他反應變數和計算屬性，如vue3中的方法嗎？

我正在將我的應用程式從 vue 2 更改為 vue 3。通過使用組合 api，我在該設定掛鉤中更改了我以前的渲染函式。在檢查了一些檔案之后，我知道我可以使用context.expose({}).

現在我的問題是：

1. 如何替換 vue 3 組合 API 中創建的方法？（我們知道，setup hook 發生在 beforeCreate hook 之前，但無法理解如何在 setup hook 中執行這些操作？）
2. 我們可以使用 context.expose 回傳反應變數和計算屬性嗎？

這是我的設定腳本：

    <script>
import {h,ref,computed,provide} from 'vue';
export default {
 name: 'something',
 props: some props,
setup(props,context) {
      const currIdx = ref(0);
      const tabCnt = ref(0);
      const idxMap = ref(new Map());
      const idxs = ref([]);

      // other variables

      // computed properties
        const $_size = computed(() =>{
         // 1. check this.size
            if(props.size) {//'medium','small'
                if(props.size === 'medium') return 'medium'
                if(props.size === 'small' ) return 'small'
            }
            // 2. check flags
            if(props.medium) return 'medium'
            if(props.small ) return 'small'
            // 3. default value : 'medium'
            return 'medium';
        });
       // [COMPUTED] Props normalize : SHAPE
        const $_shape = computed(() =>{
            // 1. check this.shape
            if(props.shape) { // 'border','underline','none'
                if(props.shape === 'border'   ) return 'border'
                if(props.shape === 'underline') return 'underline'
                if(props.shape === 'none'     ) return 'none'
            }
            // 2. check flags
            if(props.border   ) return 'border'
            if(props.underline) return 'underline'
            // x. default value : 'border'
            return 'border';
        });


      // [COMPUTED] - [END REGION]
      const getLabelNode = (props) => {
            var label = props.label, idx = props.idx, disabled = !!(props.disabled || props.disable)
            return h('vu-tab-label',{props:{idx, disabled}},[label]);
        };

      
          
          // 2. make window area -> label   navi(?)
        var labelWindow = [];
        labelWindow.push(h("div",{"class":"vu-tab__label-wrapper","ref":"scroll"}, labels));
        if(props.navigation || props.addBtn) {
            labelWindow.push(h(tabNavi))
        }

        // 3. do something
        idxs.value = Array.from(idxMap.value.keys());

        // 4. make class
        let tabClass = [];
        tabClass.push("vu_tab-box");
        tabClass.push(`vu-tab-box--${this.$_shape}`);

        // methods
        const onAddClick =(e) => {
            context.emit('add-tab',e);
        };

        context.expose({
            onAddClick,
        });
  
        // x. return all nodes
        return h("div",{"class":tabClass},[
            h("div",{"class":"vu-tab__label-window","ref":"window"},labelWindow),
            h("div",{"class":"vu-tab__content-wrapper"},contents)
        ]);
    
    },
  }
</script>

對于問題 1，這是我創建的鉤子，我想在 setup 中執行這些操作。

created() {
    // 1. Check default index
    if( (this.defaultIdx === 0) || this.defaultIdx ) {
        this.currIdx = this.defaultIdx;
        return;
    }
    // 2. check slots
    var slots = this.$slots['default']
    if(!!slots) {
        slots.find(vNode => {
            if (!vNode.componentOptions) { return false }
            var idx = vNode.componentOptions.propsData.idx;
            if (idx === undefined) { return false }
            this.currIdx = idx;
            return true;
        });
    }
},

uj5u.com熱心網友回復：

created鉤子在合成 api 中

這個很簡單，composition api中沒有createdor beforeCreatehook。它被完全取代setup。您可以setup直接在函式中運行代碼，也可以將其放入從內部呼叫的函式中setup。

expose是否使用反應性暴露屬性

是的。雖然使用模板參考訪問子組件的值并不是真正的“Vue”方式，但它是可能的，并且傳遞的值保持它們的反應性。我找不到這方面的任何檔案，所以我快速實作了一個小型代碼沙箱來嘗試一下。你自己看。

https://codesandbox.io/s/falling-breeze-twetx3?file=/src/App.vue

（如果遇到類似“Cannot use import outside a module”的錯誤，只需在代碼沙箱內重新加載瀏覽器，似乎代碼沙箱模板有問題）

標籤：javascript Vue.js Vue组件 Vuejs3

上一篇：如何在Vue生態系統之外使用Vue3回應式物件

下一篇：如何使用vuetify重置v-input-file？