Vue —— 进阶脚手架（一）（refs属性、props配置项）

Vue全家桶 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶（零）	初始化脚手架
Vue2.x - 进阶（一）	refs属性、props配置项
Vue2.x - 进阶（二）	混入 mixin、插件 plugins、样式 scoped
Vue2.x - 进阶（三）	本地存储
Vue2.x - 进阶（四）	组件的自定义事件
Vue2.x - 进阶（五）	全局事件总线、消息订阅与发布
Vue2.x - 进阶（六）	过渡与动画
Vue2.x - 进阶（七）	解决开发环境 Ajax 跨域问题
Vue2.x - 进阶（八）	默认插槽、具名插槽和作用域插槽
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

一、refs 属性

1. refs 的作用

被用来给元素或组件注册引用信息（id 的替代者）。

2. 应用的方面

应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）。

3. 使用方式

	//打标识
	<h1 ref="xxx">...</h1> 或 <School ref="xxx">...</School>

	//获取
	this.$refs.xxx

4. 实例：打印输出 DOM 元素

注意：

1. 打标识的时候是 ref
2. 获取的时候是 $refs

	<template>
	  <div>
	    <h2 v-text="msg" ref="title"></h2>
	    <button ref="btn" @click="showDOM">点我输出 DOM元素</button>
	    <School ref="sch" />
	  </div>
	</template>
	
	<script>
	import School from "./components/School.vue";
	
	export default {
	  name: "App",
	  data() {
	    return {
	      msg: "Hello vue",
	    };
	  },
	  methods: {
	    showDOM() {
	      console.log(this.$refs.title);
	      console.log(this.$refs.btn);
	      console.log(this.$refs.sch);
	    },
	  },
	  components: {
	    School,
	  },
	};
	</script>

二、配置项 props

1. 功能：让组件接收外部传过来的数据

2. 传递数据

	<Demo name="xxx"/>

3. 接收数据

	//第一种方式（只接收）：
    props:['name']

	//第二种方式（限制类型）：
    props:{
        name: String 
    }

	第三种方式（限制类型、限制必要性、指定默认值）：
    props:{
        name:{
           type: String, //类型
            required: true,//必要性
            default:'老王' //默认值
        }
    }

备注：props 是只读的，Vue底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么复制 props 的内容到 data 中一份，然后去修改 data 中的数据。

4. 接收姓名、年龄和性别的几种方式

	//简单接收
	props:['name','sex','age']

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

	//接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
	props:{
        name:{
            type: String, //name的类型是字符串
            required: true //名字是必要的
        },
        age:{
            type: Number, //age的类型是数值
            default: 99 //不传的默认值
        },
        sex:{
            type: String,
            required: true
        }
    }

5. 实例：子组件配置 props，接收父组件的值

注意点：

1. 子组件配置 props 传过来的都是父组件在标签中配置的属性。
2. 需要动态绑定的属性，在父组件标签中要添加 v-bind 指令进行单项数据绑定。
3. 需要动态绑定的属性，在子组件中需要在 data 中通过 this.xxx 获取，并赋给一个值，以便通过插值表达式呈现在页面中。

student.vue

	<template>
	  <div>
	    <h2>{{ msg }}</h2>
	    <h3>学生姓名：{{ name }}</h3>
	    <h3>学生性别：{{ sex }}</h3>
	    <h3>学生年龄：{{ myAge }}</h3>
	    <button @click="addAge">年龄 +1</button>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "StudentName",
	  props: ["name", "sex", "age"],
	  data() {
	    return {
	      msg: "I am a student",
	      myAge: this.age,
	    };
	  },
	  methods: {
	    addAge() {
	      this.myAge++;
	    },
	  },
	};
	</script>

App.vue

	<template>
	  <div>
	    <Student name="张三" sex="男" :age="20"></Student>
	    <Student name="李四" sex="男" :age="22"></Student>
	  </div>
	</template>
	
	<script>
	import Student from "./components/Student.vue";
	
	export default {
	  name: "App",
	  components: {
	    Student,
	  },
	};
	</script>

不积跬步无以至千里 不积小流无以成江海