vue中的ref属性和props属性

222 阅读1分钟

一、ref属性;

1、被用来给元素或者子组件注册引用信息(id的替代者)

2、应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件的实例对象。

3、使用方法:

就两个步骤:

(1)、打标识:<h1 ref="xxx">……或者<School ref = "xxx">(这个是组件)

(2)、获取:this.$refs.xxx;//这样就可以获取到;

二、props属性;

这个可以用于父组件向子组件传递数据;

父组件在组件标签中写上要传的变量:例子:

<School name="张三" age="12" sex="男">

子组件要做的事情:

props:['name','sex','age'];//和methods、components、data是同一级的;

而props有三种写法:

1、简单写法(只接收)

props:['name','age','sex'];

2、限制数据类型的写法;(接收的时候限制类型)

props:{
  nameString,
  age:Number,
  sex:String
}

3、限制数据类型、限制必要性、指定默认值的写法;

props:{
  name:{
     type:String,
     required:true,//为true的意思是必传项
   }
   age:{
     type:Number,
     default:99//这个是设置默认值
   }
}