Vue props 使用問題

vue props

noway 2021-05-02 17:46:27 ‧ 838 瀏覽

分享至

您好：
程式碼如下

   <div id="app">
        <test :text_c="text_D"></test>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                text_D: "hello",
            },
            components: {
                test: {
                    props: ["text_c"],
                    template: "<div>{{text_c}}</div>"
                }
            }

        });
    </script>

請問，我解釋這段語法是否正確?
1.設定 test 內有，props: ["text_c"] ，而 template: "{{text_c}}" 使用props: ["text_c"] ，故這兩邊的名稱要一樣text_c

，「:text_c」使用 props綁定text_c，並設定他的值為 data: {text_D: "hello", },
template: "{{text_c}}" 的{{text_c}} 並不是設定使用data的text_D。

謝謝!

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-05-02 19:37:18 檢舉

說真的，我已經被你搞混了。不知道該從何說起。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

koro_michael

iT邦新手 2 級 ‧ 2021-05-02 23:36:02

最佳解答

test: {
    props: ["text_c"],
    template: "<div>{{text_c}}</div>"
}

props 是跟外部說，要使用 test 這個組件需要傳入的參數

這個參數的名稱就叫做 text_c

之後 template 裡面就可以使用 text_c 這個變數了

換句話說 template 的 {{ text_c }} 跟 props 的 text_c 是一樣的，都是由外部傳進來的

======================================================

至於外部使用上傳值大致分為綁定和寫死

這個是綁定(資料由 vue 來)，請注意 text_c 前面的冒號，這樣畫面上顯示的內容是 hello

<test :text_c="text_D"></test>

這個是寫死，前面並沒有冒號，這樣畫面上顯示的內容是 text_D

<test text_c="text_D"></test>

範例 https://jsfiddle.net/4jvqt3wL/

======================================================

不知道這樣有沒有幫助到你，有的話請給我個最佳解答，謝謝

回應 1
分享
檢舉

noway iT邦研究生 1 級 ‧ 2021-05-16 16:42:14 檢舉

您好：由您的解釋，有比較有概念了，謝謝!

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙