iT邦幫忙

0

Vue props 使用問題

您好:
程式碼如下

   <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

  1. , 「:text_c」使用 props綁定text_c,並設定他的值為 data: {text_D: "hello", },

  2. template: "{{text_c}}" 的{{text_c}} 並不是設定使用data的text_D。

謝謝!

說真的,我已經被你搞混了。不知道該從何說起。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
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/

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

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

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

您好:由您的解釋,有比較有概念了,謝謝!

我要發表回答

立即登入回答