props的作用

能让组件如同我们所知的js函数一样,在被使用时能够接收参数,并根据参数有不同的展现


使用props流程

①给组件添加props选项

在自定义组件的内容配置对象里面给上一个props选项,他和template同级,如下:

Vue.component('props-message',{
    props:['message'],	
    template:`<div>{{message}}</div>`
})

注意:

  1. 这个props选项的值为一个对象或者数组,有点类似于js函数的形参,规定了这个组件能够接收那些参数
  2. 然后这里要注意下:对于组件传参采取的是类似于对象传参,即传入的参数的名称要和props里面给定的名称一致,否则无法接收到任何参数

②在调用组件时传入实际参数即可

在调用组件的标签上,按照标签属性的写法即可传入参数到组件中

注意:传递的参数名称(属性名)应该包含在组件的props选项中的数组或者对象中,否则组件无法接收你的值

<div id="app">
        <props-message message='测试数据'></props-message>
</div>

③完整代码及效果

对于props中的参数,我们可以如同data里面的数据一样访问

<div id="app">
    <props-message message='测试数据'></props-message>
</div>
<script>
    Vue.component('props-message', {
        props: ['message'],
        template: `<div>这是一个自定义组件,父组件传给我的内容是:{{message}}</div>`
    })
    var vueApp = new Vue({
        el: '#app',
    })
</script>

效果图
在这里插入图片描述


④使用props传递分析

  1. 我们写在props中的字段名,可以和调用data返回的中的数据形式一样,直接写名字进行调用。不过一个是来自父级,一个是来自本身
  2. 对于传递参数的数量没有限制,这意味着你可以传递任意个数的参数,只要写在props里面就可以了
  3. props中的字段和data中的中的字段不允许相同,否则会直接报错
  4. 对于props,不要如同data一样直接修改(能够修改,但是控制台会报错),避免直接改变属性,因为当父组件重新呈现时,该值将被覆盖

使用props传递数据时的一些细节

①传参时名称格式的问题

由于html不区分大小写,当使用DOM网页模板时,写在props数组或对象中的参数名为驼峰命名时,在参数传递时应该用分隔符将组成驼峰的单词进行分开

比如在props中有驼峰命名参数myName, 那么在传参时就应该写成my-Name或者my-name(由于html不区分大小写,所以my-name==my-Name,但是最标准写法应该是全小写中杠线分割)

<div id="app">
    <props-message my-Message='测试数据'></props-message>
</div>
<script>
    Vue.component('props-message', {
        props: ['myMessage'],
        template: `<div>这是一个自定义组件,父组件传给我的内容是:{{myMessage}}</div>`
    })
    var vueApp = new Vue({
        el: '#app',
    })
</script>

当然,如果是使用的template模板字符串,可以忽略此限制
在这里插入图片描述


②传递动态数据

v-bind绑定属性值的一个特性:一般情况下,使用v-bind给元素特性(attribute)传递值时,Vue会将" "中的内容当做一个表达式,比如:

<div my-Message='message'></div>

上面这样,div元素的my-Message特性值就是message

而这样

<div v-bind:my-Message='message'></div>

这里的message应该是Vue实例的data的一个属性,这样div元素的my-Message特性值就是message这个属性的值
之所以说是一般情况,是因为class和style特性并不是这样。用v-bind:class和class传入正常的类名,效果是一样的,因为对于这两个特性,Vue采用了合并而不是替换的原则

之后,这时我们就可以使用v-bind绑定要传递的参数,如下:
在这里插入图片描述
注意: 如果你传参时没有使用v-bind指令绑定,那么不管你的参数是什么类型,子组件接收到的都是字符串,哪怕你写数组对象也是如此


③Vue2参数传递是单向数据流

现在盛行的vue2来说,通过props传递参数是单向的

  1. 即只允许父组件传递参数到子组件,而不允许子组件传递到父组件
  2. 在父组件参数值变了子组件也会变,但是子组件参数值变了父组件却不会变,而且在子组件去修改参数的话会被vue警告:
    在这里插入图片描述
    大致含义:避免直接对prop进行改变,因为每当父组件重新呈现时,都会覆盖该值
  3. 由于在js中,对象和数组是引用类型,指向同一个内存空间,所以当我们通过v-bind绑定的参数是一个数组或对象,然后传递过来时,那么他们在子组件的改变会影响到父组件的(这和vue组件无关,由js特性所决定的,如果想避免这种情况,那么在子组件接收到此引用类型参数后处理下即可,如用JSON方法处理或用Object.assign()方法处理等)
    演示代码:
<div id="app">
   <h3>{{message.str}}</h3>
   <props-message v-bind:my-Message='message'></props-message>
</div>
<script>
   Vue.component('props-message', {
       props: ['myMessage'],
       template: `<div>这是一个自定义组件,传给我的内容是:{{myMessage.str}}<br>
               <button @click='fn'>修改测试数据</button>
               </div>`,
       methods: {
           fn: function () {
               this.myMessage.str = '我被修改了';
           }
       }
   })
   var vueApp = new Vue({
       el: '#app',
       data: {
           message: {
               str: '测试数据'
           }
       }
   })
</script>

效果图:
在这里插入图片描述
点击按钮执行fn方法
在这里插入图片描述


在子组件中如何使用参数props

①参数原封不动的使用

直接调用,不做任何处理

Vue.component('props-message', {
    props: ['myMessage'],
    template: `<div>这是一个自定义组件,传给我的内容是:{{myMessage}}</div>`,
});

②参数作为某种状态的初始值使用

直接在子组件的data选项中声明一个字段来接收此参数,然后我们只需要操作这个字段就可以了,从而可以避免直接操作参数属性,如:

<div id="app">
    <person-message :num='num'></person-message>
</div>
<script>
    Vue.component('person-message', {
        props: ['num'],
        template: `<div>
        <h2>vip积分:{{sonNum}}</h2>
        <button @click='fn'>点击增加vip积分</button>
        </div>`,
        data: function () {
            return {
                sonNum: this.num,
            }
        },
        methods: {
            fn: function () {
                this.sonNum++;
                console.log(this.userInfo.age)
            }
        },
    })
    var vueApp = new Vue({
        el: '#app',
        data: {
            num: 100,
        }
    })
</script>

效果图:初始积分是100
在这里插入图片描述
注意:
此时由于值中转了下,然后也不是引用类型,所以在这里我们父组件对此参数修改了,子组件就不会同步更改【即上面的sonNum参数变了,但是参数赋值的num不会变】

如果要实现同步更改,那么我们可以通过侦听属性选项实现,如下:

<script>
    Vue.component('person-message', {
        props: ['num'],
        template: `<div>
        <h2>vip积分:{{sonNum}}</h2>
        <button @click='fn'>点击增加vip积分</button>
        </div>`,
        data: function () {
            return {
                sonNum: this.num,
            }
        },
        methods: {
            fn: function () {
                this.sonNum++;
            }
        },
        watch: {
            sonNum:function(oldV,newV){
                this.num = newV
                console.log(this.num);
            }
        }
    })
    var vueApp = new Vue({
        el: '#app',
        data: {
            num: 100,
        }
    })
</script>

③参数作为需要被转换的原始值使用

这种情况我们需要使用计算属性,比较好统一管理

<div id="app">
    <person-message :num='num' :user-info="user"></person-message>
</div>
<script>
    Vue.component('person-message', {
        props: ['num','userInfo'],
        template: `<div>
        <h2>vip积分:{{sonNum}}</h2>
        <h2>用户信息:{{userData}}</h2>
        <button @click='fn'>点击增加vip积分</button>
        </div>`,
        data: function () {
            return {
                sonNum: this.num,
            }
        },
        methods: {
            fn: function () {
                this.sonNum++;
                console.log(this.userInfo.age)
            }
        },
        computed: {
            userData:function(){
                let str = "【姓名:"+this.userInfo.name+",性别:"+this.userInfo.sex+",年龄:"+this.userInfo.age+"】"
                return str;
            }
        }
    })
    var vueApp = new Vue({
        el: '#app',
        data: {
            num: 100,
            user:{name:'zs',sex:'nan',age:18},
        }
    })
</script>

效果图
在这里插入图片描述


对传入参数props进行数据验证

自动的对传入参数进行检验,那么我们就需要让props的值为一个对象

进行参数检验的必要性:如果我们的组件给别人使用时,我们没在组件中进行参数验证,那么当接收到一些毁灭性参数值或类型我们组件基本上就废了

①使用对象形式的props验证参数的基本方式

使用对象接收参数时,参数后面必须要跟上其类型,否则会出异常
在这里插入图片描述
如果验证不通过,引用开发版本的vue.js时,会在控制台抛出警告

注意:

  1. 如果你参数的类型是一个函数,那么你可以显示的给出type:Functin,然后属性值为函数的情况,使用时应该给上括号,以调用此函数
    2.如果你参数的类型为你自定义的一个类型,比如是你定义的某个函数或对象,那么你也可以给出 type:自定义类型名来进行验证
<div id="app">
    <my-component :person-prop='person'></my-component>
</div>
<script>
    // 自定义Person构造器
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Vue.component('my-component', {
        template: `<div>名字: {{ personProp.name }}, 年龄: {{ personProp.age }} </div>`,
        props: {
            personProp: {
                type: Person     // 指定类型
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            person: new Person(2, 3)  // 传入Number类型会报错
        }
    })
</script>

效果图
在这里插入图片描述


②在验证参数时允许为几种类型之一

props: {
age: [Number, String], //验证number必须为数字或者字符串
sex: String, //验证必须是字符串
vip: Boolean, //验证必须是布尔类型
teg: Array, //验证必须是数组
name: Object, //验证必须是对象
fn: Function, //验证必须是对象
},

③在验证参数时允许给定默认值

在这里插入图片描述
如果有参数传入那么就会覆盖掉默认参数


④对象和数组参数默认值需要用一个函数来返回

在这里插入图片描述


⑤在验证参数时可以要求某些参数必传

sex: {
type: String,
required:true,
},
Logo

前往低代码交流专区

更多推荐