component props

Posted on Edited on In Views: Disqus:

 

一、props 屬性的使用

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <my-component mytitle="Hello component" sub-title="kebab-case"></my-component>
    </div>

    <script>
        Vue.component("my-component", {
            template: `<div>{{mytitle}}---{{subTitle}}</div>`,
            props: ['mytitle', 'subTitle']
        });

        let vm = new Vue({
            el: "#app"
        });
    </script>

</body>

</html>

說明：

1、由外 (元素屬性值) 向內傳入，特性為資料一更新，則傳入 data ，隨即更新頁面。

2、如果要在 props 使用 camel-cased 寫法，則於自訂 tag 裡要使用 kebab-cased 寫法。

 

二、Prop Types

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <my-component product-id="a123" product-name="car" price="1000"></my-component>
    </div>

    <script>
        Vue.component("my-component", {
            template: `<div>{{productId}}-{{productName}}-{{price}}</div>`,
            props: {
                productId: String,
                productName: String,
                price: Number,
            }
        });

        let vm = new Vue({
            el: "#app"
        });
    </script>

</body>

</html>

說明：

1、此例為特別指定 Prop 裡屬性的形態。

 

三、Dynamic Props

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <my-component v-bind:product-id="dataId" :product-name="productName" price="1000"></my-component>
    </div>

    <script>
        Vue.component("my-component", {
            template: `<div>{{productId}}-{{productName}}-{{price}}</div>`,
            props: {
                productId: String,
                productName: String,
                price: Number,
            }
        });

        let vm = new Vue({
            el: "#app",
            data: {
                dataId: "a123",
                productName: "car"
            }
        });
    </script>

</body>

</html>

說明：

1、動態載入，使用 vue 裡面的 data，然後將資料載入至 component。

 

參考資料：

vue中$attrs你会用吗？