父子组件之间的传值问题

最新推荐文章于 2024-08-02 09:29:40 发布

weixin_34292959

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量218

点赞数

文章标签：后端 javascript ViewUI

原文链接：https://juejin.im/post/5ca6e009f265da30a3303f68

版权

父组件给子组件传值

父组件给子组件传值需要通过属性传递,子组件通过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>
复制代码