父子元件之間的傳值問題

梭梭醬加油鴨發表於2019-04-05
元件

父元件給子元件傳值

父元件給子元件傳值需要通過屬性傳遞,子元件通過props以陣列的形式傳遞。

<body>
    <div id="root">
        <child :content="123"></child>
    </div>
    <script>
        Vue.component('child',{
            props:['content'],
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el: '#root',
        })
    </script>
</body>
複製程式碼

那麼，父元件傳過來的值，如果想指定型別或者做限制怎麼辦？

<body>
    <div id="root">
        <child :content="123"></child>
    </div>
    <script>
        Vue.component('child',{
            props:{
                content: String
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el: '#root',
        })
    </script>
</body>
複製程式碼

如上所示，可以通過物件形式，將值指定為string。顯然上例中123是數字（因為content前面加了冒號），就會報錯。如果想指定為數字或字串怎麼辦？

<body>
    <div id="root">
        <child :content="123"></child>
    </div>
    <script>
        Vue.component('child',{
            props:{
                content: [String,Number]
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el: '#root',
        })
    </script>
</body>
複製程式碼

還想更進一步的限制值怎麼辦？

<body>
    <div id="root">
        <child content="hello world"></child>
    </div>
    <script>
        Vue.component('child',{
            props:{
                content: {
                    type:String,
                    // content不一定非要傳值，true的話就一定要
                    required: false,
                    // 定義預設值,當content沒值的時候會使用
                    default 'default value'
                }
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el: '#root',
        })
    </script>
</body>
複製程式碼

除了限制是否要傳值，值型別和預設值以外，還能限制傳值長度：

<body>
    <div id="root">
        <child content="hello world"></child>
    </div>
    <script>
        Vue.component('child',{
            props:{
                content: {
                    type:String,
                    // required: false,
                    // // 定義預設值,當content沒值的時候會使用
                    // default 'default value',
                    validator: function (value) {
                        return (value.length>5)
                    }
                }
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el: '#root',
        })
    </script>
</body>
複製程式碼

相關文章