Vue中ref属性，props传参形式

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中调佣
		}