Ref
1.被用来给元素或子组件注册引用信息(id的替代者)
//<h1 v-text="msg" id="title"></h1>
<h1 v-text="msg" ref="title"></h1>
2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
//html 标签
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
//组件实例化对象
<School ref="sch"/>
console.log(this.$refs.btn) //真实DOM元素
console.log(this.$refs.sch) //School组件的实例对象(vc)
3.使用的步骤
1.打标识:```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx" />
2.调用:this.&refs.xxx
Props
1.props的使用
在组件实例中传参
<Student name="李四" :age="18"/>
接受参数
props:['name','age']//第一种
props:{
name:String,
age:Number
}//第二种
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}//第三种
注意
props传递的参数是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。即将props的参数接住然后进行修改
在TODOlist中通过数据的双向绑定,对任务总数的动态修改
total(){
return this.todos.length//将传递的todos放在计算属性computed中调佣
}