2021/9/28北京 vue---父子组件通信（ref和props）

v-text：拿到name的值替换掉整个div的内容。

如下面：你会发现“你好”并不能起作用。没有插值语法{{name}}灵活。

<div v-text='name'> 你好</div>
data:{
name:'忍者神龟'
}

---

ref和this.$refs

就是替换掉了js原生的document.getemementbyid(),给标签起名字，方便操作。

比如下面这个，就给h1标签起了一个叫“title”的名字，在showDOM方法里，this.$refs.title，就可以拿到了。this.$refs,可以取到所有你命名的标签。

 那要是在组件上起名字如下图，拿到的又是啥？？

那拿到的就是该组件的实例对象，从而获取到子组件的值和方法

<School ref="sch"/>
console.log(this.$refs.sch)

---

props:先得牢记，props它写在子组件中

要实现父子组件通信：子组件要显式声明需要哪些数据

//子组件接受数据时，简单的对数据的类型检查
props:{
    name:String,
    age:String,
    sex:String
}

//限制类型，是否必传，默认值
props:{
    name:{
     type:String,
     required:true, //name是必要的
     validator: function (value) {
     //这个值必须匹配下列字符串中的一个
       return ['success', 'warning', 'danger'].indexOf(value) !== -1
     }
    }
    age:{
     type:Number,
     default:99//默认值
    }
    //带有默认值的对象
    propE:{
     type: Object,
     // 对象或数组默认值必须从一个工厂函数获取
     default: function () {
       return { message: 'hello' }
      }
    },

}

---

 那此时，父组件是怎么给子组件传值的呢？

父组件在使用子组件时候，要用v-bind来绑定数据

//加了":",表示动态绑定。向子组件传的是引号里的js表达式
<Student name="lisi" sex="男" :age="18">

---

props以为这就完了？客官不再深入了解一下？

子组件从props里拿到的值是不允许修改的，并且它会优先于return{}里的数据先加载到子组件的vc(vue component),所以图中可以看到是myAGE:this.age