精华内容
下载资源
问答
  • vue组件的props属性
    2021-02-04 23:58:55

    VUE组件的props属性


    • vue组件可以通过props属性来从父组件获取值
    • props属性可以有以下几种写法
      // 数组写法
      props: ['title', 'content', 'like']
      // 对象写法 - 1
      props: {
          title: String, // 指定title的类型,设置title只能是String类型的
          content: undefine, // undefine和null表示content可以是任何类型的
          like: [String, Number], // like可以是数组中的任意类型 
      }
      // 对象写法 - 2
      props: {
          title: {
              type: String, // type指定属性类型,用法同上
              default: 'title', // default指定默认值
          },
          content: {
              type: String,
              required: ture, // reuired声明属性是否是必须的,即父组件是否必须传值
          },
          like: {
              type: Number,
              validator: val => { // 自定义验证函数
                  return val > 100
              },
          }
      }
      
    • 一般情况下,我们都是使用最后一种写法,即props中的每个属性都是一个对象,我们先称它们为prop对象
    • 每个prop对象都可以有如下属性
      • type
        • 该属性指明prop的类型,type的值可以是下列原生构造函数中的一个
          • [String, Boolean, Number, Array, Object, Date, Function, Symbol]
        • 也可以是null或者undefine,表示prop可以是任何类型的
        • 或者是一个自定义的构造函数,这会通过instanceof的方式来进行比较,来验证prop的值是否是通过new对应的构造函数创建的
          props: {
              user: { // user = new Persion()
                  type: Persion
              }
          }
          
      • default
        • 该属性为prop设定一个默认值,父组件传的值将会覆盖该默认值
      • required
        • 该属性的值是一个布尔值,表明prop是否是必须的,即父组件是否必须传值
      • vaildator
        • 该属性的值是一个函数,有一个参数是prop当前的值,返回一个布尔值,使用方式如上
        • 当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告

        注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的

    • props中的属性是通过单向数据流的方式从父组件传到子组件的
    • 这意味着:
      • props中的属性只能通过父组件来更新
      • 子组件不能直接通过this.prop = xx的方式来更新props中的属性
      • 子组件要更新props中的属性,可以使用如下两种方式
      // 父组件
      <Children :msg.sync="msg" />
      // ...
      data() {
          return {
              msg: 'original'
          }
      }
      // 子组件
      props: {
          msg: {
              type: String,
          }
      }
      methods: {
          handleChange() { // 触发handleChange方法后改变msg
              this.$emit('update:msg', 'change')
          }
      }
      
       --- 子组件
       props: {
         value: {
           type: [Number, String],
         },
         changeMsg: {
           type: Function,
           default: () => { },
         }
       },
       data () {
         return {
           msg: this.value
         }
       },
       methods: {
         handleChangeMsg () {
           this.msg = 'change'
           this.$emit('input', this.msg)
         }
       }
      --- 父组件
      <template>
         {{ msg }}
      </template>
      
      <script>
      export default {
       name: 'Home',
       components: {
         Children
       },
       data () {
         return {
           msg: 'original',
         }
       }
      }
      
    更多相关内容
  • 主要帮助大家简单的理解vueProps属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 如下所示: <!DOCTYPE html> <html lang=en xmlns:v-on=http://www.w3.org/1999/xhtml> <head> <meta charset=UTF-8> <title>Title</title>...child v-bind:my-message
  • 主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vueprops属性

    千次阅读 2021-11-30 14:25:55
    props功能:让组件接受外部传过来的数据 (1):传递数据:<Demo name="xxx"/> (2):接受数据: 第一种:(只接收):props: ['name'] 第二种:(限制类型):props:{ name:Number } 第三种:(限制...

    props功能:让组件接受外部传过来的数据

    (1):传递数据:<Demo name="xxx"/>

    (2):接受数据:

            第一种:(只接收):props: ['name']

            第二种:(限制类型):props:{  name:Number }

            第三种:(限制类型,限制必要性,指定默认值):

                    

    props: {
        name: {
            type: String,
            required: true, 
            default: 'hhh'
        }
    }

    备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,

            若业务需求确实需要修改,那么请复制props的内容在data中声明一份,然后去修改data

            中的数据。


    在URL中props的传参

    第一种写法:props值为对象,该对象中所有的key-value的组合

            最终都会通过props传给Wea组件

    props: {id:123456}

     第二种写法:props值为布尔值 true,则把路由收到的所有params

                    参数通过props传过去

    第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传过去

    {
        path: '/wea/:id',
        name: 'Wea',
        component: Wea,
        props:function(route){
          console.log(route);
          return {
            id:route.params.id,    //params 指的是 / 中的参数
            liangzai:route.query.liangzai   // query 指的是 ? 后的参数
          }
        },
      },
    
    
    或写成
        props(route){
          return {
            id:route.params.id, 
            liangzai:route.query.liangzai
          }
        },

     

     

    展开全文
  • 1.静态传值(在父组件中赋值好props属性的值传递给子组件) 父组件 <input v-model=message> <child message=hello></child> [removed] import child from './components/child.vue' export ...
  • vue中组件的props属性(详)

    万次阅读 多人点赞 2021-10-27 17:15:27
    今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。

    今天这篇文章,让你彻底学会props属性……

    props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。

    问题一:那props具体是怎么使用呢?原理又是什么呢?往下看

    1、【定义被调用组件】首先,我们先定义一个person组件,用于显示个人信息的组件,我们放了一个人的姓名,性别,以及年龄,定义好这个组件之后,就可以等待其他组件进行调用。那么既然别的组件可以调用,我们就需要再定义一个props属性,用于接收别的组件传进来的值。

     注意:组件中name、sex、age都是一个prop,将三个属性放到一起,就是props,这就是props的由来,是prop的复数形式,代表多个prop属性的集合。

     2、【调用组件】此时我们再定义一个info组件,用于展示这个人的基本信息,进行对person组价的调用实现信息的展示,分为下图四个步骤进行调用。并传入参数

     3、【看效果】传入成功。

     问题二:那如果我们想给年龄加1岁,怎么实现?

    我们可能会直接这样加1

     看效果是否能实现,变成19,看下图显然是不正确的。因为你传入的年龄是个字符串18,所以加1只会在18后面进行拼接。

     然后有的人说,那传数字,怎么传数字呢?很简单,一个符号搞定。

    我们只需要在age前面加上冒号 :他就会只识别双引号里面的东西18 ,否则识别的是双引号18

     看下效果,此时就成功了。

     问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型?肯定是数字类型,但是有人非要传字符串类型,就会影响我们对年龄的计算,比如上面的加1……那么我们如何限制类型呢?

     这时候props不能再用[]去定义,需要用{},因为限制类型时,props就是作为一个对象去使用;

    下面就是我们将三个属性分别做了限制。

     我们把年龄做了number类型限制后,再传入字符串18,看有什么变化?

     此时发现控制台,会报错,显示age的数据类型不匹配。

     虽然不影响展示,但是会报错。这可以给我们提供一个明确的提示。方便我们规范的传入数据。

     

     问题四:可以限制类型,那是不是也可以限制是否必传呢?

     答:当然可以。

    假设姓名必传,其他非必传。

    类型属性:type:xx

    必传属性:required:true

    默认属性:default:xx

     name必传,那么我们不传试试,年龄不传默认18

     结果,控制台同样报错,提示,name是必传属性。年龄我们没传,也成功展示的是默认值,19是因为一开始对年龄进行了加1操作,这样我们就成功对属性进行了限制。

     

    对以上总结:

    props在接收数据的同时,对数据进行了类型限制+默认值的指定+必要性的限制

    问题五:props接收的属性值可以修改吗?

    答:不可以

    我们添加一个button,以及点击事件

     注意:我们要访问props里面的属性值,通过this.即可找到

     

     查看结果,发现页面可以显示,但是控制台报错,因此它是不可修改的

     问题六:必须要修改props属性值,怎么办?

     答:通过data去间接修改

    我们在data里面重新定义一个变量去接收props属性。这个变量最好不要重名,重名的话,优先获取props属性值,优先级props>data。然后我们在操作或者html绑定值的时候,都去操作data里面新定义的变量

     此时可以看到,修改成功,也没有报错:

     总结:配置项props

    -------让组件接收外部传来的数据

     接收数据三种方式:

    (1)只接收:props: ['name','age','sex']

    (2)接收并限制类型:props: { "name":Number }

    (3)限制类型、限制必要性指定默认值:

        props:{
            "name":{
                type:String,
                required:true
            },
            "age":{
                type:Number,
                default:18
            },
            "sex":{
                type:String,
                default:'男'
            },
        },

    注意:props是只读的,vue底层会检测你对props的修改,如果进行了修改,控制台会报错,必须修改,就复制一份到data中,通过data去修改数据。

    展开全文
  • vueprops 中定义多属性对象,语法如下 例如定义 formValidate 对象,且 formValidate 中含有属性 city 和 name,默认 city 和 name 都是空 formValidate: { type: Object, default: ()=>{ return { ...

    vue 在 props 中定义多属性对象,语法如下

    例如定义 formValidate 对象,且 formValidate 中含有属性 city 和 name,默认 city 和 name 都是空

    formValidate: {
        type: Object,
        default: ()=>{
            return {
                city: '',
                name: ''
            }
        }
    }

    测试

    下面以View UI (iview)中的组件 Form 表单作为子组件进行演示

    子组件 Userinfo 代码

    <template>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="Name" prop="name">
                <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
            </FormItem>
            
            <FormItem label="City" prop="city">
                <Select v-model="formValidate.city" placeholder="Select your city">
                    <Option value="beijing">北京</Option>
                    <Option value="nanjing">南京</Option>
                    <Option value="shenyang">沈阳</Option>
                </Select>
            </FormItem>
           
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
            </FormItem>
        </Form>
    </template>
    <script>
        export default {
            props: {
                formValidate: {
                    type: Object,
                    default: ()=>{
                        return {
                            city: '',
                            name: ''
                        }
                    }
                }
            },
            data () {
                return {
                    ruleValidate: {
                        name: [
                            { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                        ],
                        city: [
                            { required: true, message: 'Please select the city', trigger: 'change' }
                        ]
                    }
                }
            },
            methods: {
                handleSubmit (name) {
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.$Message.success('Success!');
                        } else {
                            this.$Message.error('Fail!');
                        }
                    })
                },
                handleReset (name) {
                    this.$refs[name].resetFields();
                }
            }
        }
    </script>
    

    父组件代码

    <template>
        <div>
            <Userinfo :formValidate="formValidate"></Userinfo>
        </div>
    </template>
    <script>
    import Userinfo from '@/view/chil/Userinfo';
        export default {
            components: {
                Userinfo
            },
            data () {
                return {
                    formValidate: {
                        city: 'beijing',
                        name: '薛宝钗'
                    },
                }
            },
            methods: {
    
            }
        }
    </script>
    

    运行效果

     

    至此完

    展开全文
  • 主要介绍了Vue中用props给data赋初始值遇到的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue中component组件的props使用详解,这里整理了详细的用法,具有一定的参考价值,兴趣的可以了解一下
  • Vue props 属性原理

    千次阅读 2019-09-13 14:34:06
    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象。 例如: <!DOCTYPE html> <html lang="en"> <head> <me...
  • 1.这是一个自定义属性,在封装通用组件的时候,合理地使用props可以极大的提高组件的复用性 2.语法:可以定义为数组类型的: export default { props:['init'] } 也可以定义为对象类型: export default { ...
  • vue3 watch监听props里的属性

    千次阅读 2021-10-11 11:26:35
    import { watch } from "vue"; export default { props: { items: { type: Array, require: true } }, setup(props) { watch( () => props.items, (val) => { if (val.length > 4) { console....
  • 设置props属性默认类型
  • 相反,Vue 一个专门为解决这问题而设计的功能,接下来,我们来看看。 向组件传入函数 获取一个函数或方法并将其作为一个prop传递给子组件相对比较简单。实际上,它与传递任何其他变量方式完全相同
  • Vue2学习(3) vue组件以及props属性
  • Vue ref属性、props属性、mixin属性
  • vue的ref属性props
  • 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
  • 我的需求是弹出一个模态框。...import { watch, toRefs } from "vue"; const props = defineProps({ visible: { type: Boolean, default: () => { return false; }, }, }); const visible = toRefs(props).vis
  • vue props 属性值接受多个类型 _@jie

    千次阅读 2021-05-12 10:35:16
    labelValue: { type: String | Number | Boolean, required: true, default: 0 }
  • vue组件之属性Props

    2020-12-24 12:52:41
    组件的属性和事件父子组件之间的通信父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。比如,子组件需要某个数据,就在内部定义...
  • vue props 属性值接受多个类型

    千次阅读 2020-09-08 16:57:14
    vue props 属性值接受多个类型 直接上代码: someData: { type: Array | Object, default () { return [] } } ... 如果我们自己写不限制类型的props,可以使用数组的形式 props:['someData'] 但是有时我们做...
  • 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app"> // 注意点一、:show后跟修饰符.sync // 等同于<my-componen :show=...
  • Vue-属性传值Props

    万次阅读 多人点赞 2018-09-09 16:41:30
    vue传值两种方法: 1、父组件向子组件传值(属性传值) 当数据都在App.vue中时,如下图 需要将App.vue中的值传给User.vue,则需要在两者的契合点上进行绑定,如下图, 在User.vue中需要进行注册(如下图)...
  • 由于最近学习完vue在做项目,但是在跟做项目时,发现一个问题就是props自定义属性出现了可以读也可以写,并且数据流向成了双向的问题。 初始props 在刚刚学习的时候,对于props的了解是只能读不能写,并且同时它还是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,513
精华内容 22,605
关键字:

vue的props有哪些属性