Vue基础(29)_props配置项、ref属性

ref属性:

1.被用来给DOM元素 (html、button、span等)或子组件实例 (比如：SchoolList等)创建引用标识 (相当于js中，需要操作DOM节点时(document.getElementById)临时为该节点创建了的id，以便操作节点)。

2.应用在html标签上 获取的是真实DOM元素 ，应用在组件标签 上是组件实例对象(vc)

3.使用方式(举例)：
打标识：
html 复制代码
<h1 ref="xxx">...</h1>或 <School ref="xxx"></School>
获取：
javascript 复制代码
this.$refs.xxx

App.vue

html 复制代码

<template>
    <div>
        <h1 v-text="SchoolMessage" ref="title"></h1>
        <button @click="messageTip" ref="btn">点我输出上方的DOM元素</button>
        <hr>
        <SchoolList ref="sch"/>
        <StudentList name="张三" :age="16" sex="男"/>
        <StudentList name="李四" :age="18" sex="女"/>
        <StudentList name="王五" :age="21" sex="男"/>
    </div>
</template>

props配置项

应用场景：对于一个新功能，结构、交互、样式都与已有的组件一样，唯独数据不一样 。也就是说数据是从外部带给组件的，数据是动态获取的，这也是一种组件的复用。

功能：让组件接收外部传过来的数据/方法。

1、传递数据：

举例：
html 复制代码
<Demo  name="张三" :age="16" sex="男"/>
说明：

1、传值时可通过v-bind指令【简写为:】传递不同数据类型的值 ，否则就只能传递字符串类型的值 。

2、传递的值是存在Demo组件【子组件】的实例对象身上的。

2、props接收数据的三种方式：

第一种方式（简单声明接收）：

javascript 复制代码

props: ["name", "sex", "age"] 【声明顺序与传值顺序不要求一致】

第二种方式（限制类型）：

javascript 复制代码
props:{
      name:String,
      age:Number,
      sex:String
  }
说明：

key 是声明接收的元素名，value是js中已经存在的内置构造函数（String、Number...），【接收的同时对数据进行类型限制，当传值类型与限制类型不符时，正常接收数据，给出警告】。

第三种方式（限制类型、限制必要性、指定默认值）：

javascript 复制代码
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      default: 18,
    },
    sex: {
      type: String,
      required: true,
    }
  }
说明：

如果指定了属性的required(必要性) 为true，但是没有传值，会进行警告，同时未传值的属性 值为undefined【接收的同时对数据进行：类型限制+默认值的指定+必要性的限制】。

注意：

（1）props中配置的属性会出现在组件实例对象身上，但不会出现在_data中。

（2）vc身上会显示data中的属性和props声明接收的属性，二者不容易区分，通过Vue Devtools可以非常容易分开。

（3）只要是组件实例对象身上有的属性和方法，模板中都可以直接使用。

（4）props中不要配置一定不会传值的属性，否则接收不到值就是undefined，没有意义。

（5）props接收到的属性值不要在组件中进行修改，如果非要修改，可以修改成功，但会报警告，因为Vue不建议这么做。

（6）如果组件的data中有了变量name，props中也声明了要接收name，props优先级更高【最终生效的是data中的】。

（7）组件的props中的属性会优先于data放到vc身上，所以data中可以直接引用props接收的属性的值。

（8）定义props中声明接收的属性时，不要声明一些Vue保留的属性名，比如key、ref等。

（9）通过props可以传递方法，方法需要定义在methods中，比如在A组件中定义了方法add，通过props传递给了B组件，实际传递的就是add方法的引用，add方法的定义是在A组件中的，B组件中触发add方法的调用时，真正执行的是A组件中的方法add，B组件中调用add方法传递的参数A组件中的方法也是能够接收到的，通过方法的参数实现了B组件向A组件中传递数据的功能。

备注：

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请在data中定义一个中间变量接收props中的某个属性，然后去修改data中的中间变量，当然，组件中模板引用的也必须是data中的中间变量。

代码示例：SchoolList.vue

html 复制代码

<template>
  <div  class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:'SchoolList',
    data() {
        return {
            name:'江西南昌大学',
            address:'江西省南昌市红谷滩新区学府大道999号'
        }
    }
}
</script>

<style>
*{
    margin:6px;
    padding:0
}
.school{
    background-color: burlywood;
}
</style>

StudentList.vue

html 复制代码

<template>
  <div>
    <h2 v-text="StudentMessage" class="student"></h2>
    <div class="studentList">
      <h4>姓名：{{ name }}</h4>
      <h4>性别：{{ sex }}</h4>
      <h4>年龄：{{ age }}</h4>
    </div>
  </div>
</template>

<script>
export default {
  name: "StudentList",
  data() {
    return {
      StudentMessage: "学生信息",
    };
  },
  //   简单声明接收
  //   props: ["name", "sex", "age"]

  //   接收的同时，对数据进行类型限制
  //   props:{
  //       name:String,
  //       age:Number,
  //       sex:String
  //   }

  //   接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
  props: {
    name: {
      type: String,
      // 必要性。一般情况下required和default仅指定一个【三个属性是可以同时指定的】
      required: true,
    },
    age: {
      type: Number,
      //   默认值
      default: 18,
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>

<style>
.student {
  background-color: cadetblue;
}
.studentList {
  background-color: dimgray;
}
</style>

App.vue

html 复制代码

<template>
    <div>
        <h1 v-text="SchoolMessage" ref="title"></h1>
        <button @click="messageTip" ref="btn">点我输出上方的DOM元素</button>
        <hr>
        <SchoolList ref="sch"/>
        <StudentList name="张三" :age="16" sex="男"/>
        <StudentList name="李四" :age="18" sex="女"/>
        <StudentList name="王五" :age="21" sex="男"/>
    </div>
</template>

<script>
import SchoolList from './components/SchoolList.vue';
import StudentList from './components/StudentList.vue';
export default {
    name:'App',
    components:{SchoolList,StudentList},
    data() {
        return {
            SchoolMessage:'欢迎新同学!',
            StudentMessage:'学生信息'
        }
    },
    methods:{
        messageTip(){
            // 真实DOM元素
            console.log(this.$refs.title); 
            // 真实DOM元素
            console.log(this.$refs.btn);
            // SchoolList组件的实例对象
            console.log(this.$refs.sch);
        }
    }
}
</script>

<style>
</style>