(九)Vue高级选项

最新推荐文章于 2022-07-05 16:41:33 发布

lyj_010

最新推荐文章于 2022-07-05 16:41:33 发布

阅读量130

点赞数

分类专栏： Vue.js学习文章标签： Vue高级选项

本文链接：https://blog.csdn.net/lyj_010/article/details/103150577

版权

Vue.js学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、props

　　props 可以是数组或对象，用于接收来自父组件的数据。对象允许配置高级选项，如类型检测、自定义验证和设置默认值。基于对象的语法使用以下选项：

type:
　　可以是原生构造函数中的一种、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。
default: any
　　为该 prop 指定一个默认值。对象或数组的默认值必须从一个工厂函数返回。
required: Boolean
　　定义该 prop 是否是必填项。在非生产环境中，如果这个值为 true 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator: Function
　　自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <prop-simple :msg="msg"></prop-simple>
        <prop-advanced :age="age"></prop-advanced>
    </div>
    <script>
        Vue.component("prop-simple", {
            template: "<p> simple data -- {{ msg }} </p>",
            // 普通传值
            props: ['msg']
        })

        Vue.component("prop-advanced", {
            template: "<p> advanced data -- {{ age }} </p>",
            props: {
                // 复杂验证
                age: {
                    type: Number,
                    default: 0,
                    required: true,
                    validator: function (value) {
                        return value >= 0
                    }
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "testMsg",
                // 传入正确数据
                age: 123
            }
        })
    </script>
</body>
</html>

　　注意，Vue 只有使用开发版本时，才会有警告信息（vue.js 开发版本）！

类型错误：age: ‘123’
验证失败：age: -1
组件不传值： ‘<prop-advanced></prop-advanced>’

2、propsData

　　创建实例时传递 props，主要作用是方便测试。propsData 在实际开发中使用的并不多，用在全局扩展时进行传递数据，主要搭配 Vue.extend 使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var propData_simple = Vue.extend({
            template: "<p> simple data -- {{ msg }} </p>",
            props: ['msg']
        });

        // 传入测试数据和测试元素
        new propData_simple({
            propsData: {
                msg: "testMsg"
            }
        }).$mount('#app')
    </script>
</body>
</html>

3、watch

　　一个对象，键是需要观察的表达式，值是对应回调函数，值也可以是方法名，或者包含选项的对象。当监听的数据变化时，就会调用对应的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        msg：<input type="text" v-model="msg">
        <hr/>
        obj.id：<input type="text" v-model="obj.id">
        obj.name：<input type="text" v-model="obj.name">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "testMsg",
                obj: {
                    id: "001",
                    name: "Tom"
                }
            },
            watch: {
            	// 1、值为函数
                // 可选参数 newVal 新值
                // 可选参数 oldVal 原值
                msg: function(newVal, oldVal){
                    console.log("newVal -- " + newVal + ", oldVal -- " + oldVal)
                },
                // 2、值为包含选项的对象
                obj: {
                    // 可传入方法名
                    handler: f,
                    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
                    deep: true,
                    // 该回调将会在侦听开始之后被立即调用
                    immediate: true
                }
            }
        })

        function f(){
            console.log("obj value change")
        }
    </script>
</body>
</html>

4、computed

　　计算属性将被混入到 Vue 实例中，可用于对 Vue 实例的 data 数据做简单处理，并当做 data 的属性值使用。在 getter 和 setter 中，可以在获取或设置 data 数据时，做一层过滤处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            computed: {
                // 仅读取
                numDouble: function () {
                    return this.num * 2
                },
                // 读取和设置
                numPlus: {
                    get: function () {
                        return this.num + 1
                    },
                    // v 是外部设置的值
                    set: function (v) {
                        this.num = v - 1
                    }
                }
            }
        })

        // num原值 1
        console.log(vm.num)
        // 对num做简单处理后的新属性值 num * 2 = 2
        console.log(vm.numDouble)
        // numPlus获取过滤 num + 1 = 2
        console.log(vm.numPlus)
        // numPlus设置过滤 num = 3 - 1 = 2
        vm.numPlus = 3
        // num新值 2
        console.log(vm.num)
    </script>
</body>
</html>