Vue(12)

最新推荐文章于 2024-10-08 17:48:41 发布

蓝搜香菇

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量617

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/daiism/article/details/139121513

版权

ref 属性
ref 被用来给元素或子组件注册引用信息(id的替代者)
应用在 html 标签上获取的是真实 DOM元素，应用在组件标签上获取的是组件实例对象 vc。

如果给普通的dom元素使用，引用指向的是dom元素。
如果是给子组件使用，引用指向的是子组件的实例。

ref的三种用法：

1.ref加在普通的元素上，用this.ref.name获取到的是dom元素；

2.ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件
   的所有方法；

3.如何利用v-for和ref获取一组数据获取dom节点。

   当v-for用于元素或者组件的时候，
   引用信息将是包含dom节点或组件实例的数组；

   关于ref注册时间的重要说明：
   因为ref本身是作为渲染结果被创建的，
   在初始渲染的时候，你不能访问它们--它们还不存在
   ！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

props 配置项
props是 Vue 组件之间通信的一种方式，通过props，父组件可以向子组件传递数据，即：父组件可以通过组件标签上的属性值把数据传递到子组件中。子组件可以根据自己的属性和方法去渲染展示数据或执行某些操作。由于 props 是单向数据流的，它是只能从父组件传递到子组件的，而子组件是无法更改 props 的值的，只能由父组件来修改。这样就保证了组件的数据传递不会出现混乱和错乱的情况。

定义props

在 Vue 组件中，需要通过配置 props 属性来定义组件的 props。在组件中添加 props 属性之后，就可以使用 props 选项接收从父组件传递的数据。

props传递数据：
<Demo name=“xxx”:age=“18”/>这里age前加：通过v-bind使得里面的18是数字

props接收数据：

props:['name','age']  //第一种方式(只接收)

props:{name:String,age:Number}    //第二种方式(限制类型)


//第三种方式(限制类型、限制必要性、指定默认值)
props:{
name :{
type:string，//类型
required:true,//必要性
default:'cess'//默认值
   }
}

备注:
props是只读的，Vue 底层会监测你对 props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props 的内容到 data中，然后去修改 data 中的数据

属性验证

在vue中可以通过定义 props 对象的方式进行Props校验。

为了校验一个属性，可以在 props 对象中添加一个与该属性名称相同的属性，该属性的值为一个对象。这个对象可以包含以下选项：

type: 指定属性的类型。可以为 JavaScript 原生构造函数
（如 String、Number、Boolean）或自定义构造函数。
如果指定多个可选类型，可以使用数组 [String, Number] 的方式表示。


required: 指定该属性是否是必需的。如果该属性没有默认值，
并且父组件没有传递该属性，则会在控制台中打印警告。


default: 指定该属性的默认值。如果父组件没有传递该属性，
则使用默认值。如果 default 的值是对象或数组，必须将其设置为函数，
并在函数中返回它，以避免值之间的共享。


validator: 指定一个自定义验证器函数，用于在接收到 prop 的值时检查其有效性。

例如，下面的组件定义了一个名为 my-component 的组件，其中有一个 prop 名称为 age，类型为 Number，且必需：


<template>
  <div>
    <p>My age is: {{ age }}</p>
  </div>
</template>
<script>
export default {
  props: {
    age: {
      type: Number,
      required: true
    }
  }
}
</script>

如果 my-component 在使用时没有传递 age 属性或 age 的值不是一个数字，则会在控制台中打印一个警告。如果正确设置了 prop，则会将其传递给组件，并在模板中进行渲染。

除了上面提到的选项之外，还可以通过 props 对象的 .default、.required、.type、.validator 属性来直接进行校验，例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      default: 'default message',
      required: true,
      type: String,
      validator: (value) => {
        return value.length <= 10
      }
    }
  }
}
</script>