vue 使用局部组件

最新推荐文章于 2024-08-14 13:17:05 发布

阿豪boy

最新推荐文章于 2024-08-14 13:17:05 发布

阅读量47

点赞数

文章标签： vue js python java javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066904

版权

原文链接: vue 使用局部组件

上一篇: 前端的本地存储

下一篇: vue 路由嵌套

局部组件的简单使用

在局部组件的属性中可以设置校验器，对父组件传递过来的值进行验证，避免参数错误

由于子组件不能修改父组件传递过来的值，可以接受后，将该值变为自己的数据，然后使用这个数据即可

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <my-component :a='1234'></my-component>
    </div>
    <script>
        // 局部组件

        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>',
            props: {
                // 属性名不能和data中的数据重复
                // 属性的校验 出错只警告，不中断当前代码的执行
                a: {
                    type: [String, Function, Object, Array, Number, Boolean],
                    // default:0,  // 默认值
                    required: true, // 是否必须，与default 冲突
                    validator(val) { // 验证 函数 ，参数是传递的属性值,可以作校验器
                        console.log(val, typeof(val)) // 1234,Number
                        return val > 300 //成功返回true，失败返回false
                    }
                }
            }




        })

        new Vue({
            el: '#app',
            components: {
                // 将myComponent组件注册到Vue实例下
                'my-component': myComponent
            }
        });
    </script>
</body>

</html>