企业官网建设流程全解析

ref属性:

1.被用来给DOM元素(html、button、span等)或子组件实例(比如：SchoolList等)创建引用标识(相当于js中，需要操作DOM节点时(document.getElementById)临时为该节点创建了的id，以便操作节点)。
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式(举例)：
打标识：

<h1 ref="xxx">...</h1>或 <School ref="xxx"></School>

获取【School组件实例对象】：

this.$refs.xxx

App.vue

<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配置项

在 Vue 中，props（properties【属性】 的缩写）是子组件声明的一组属性，父组件可以通过这些属性向子组件传递数据。

props 是组件之间传递数据的一种方式。在 Vue.js 中，父组件可以通过props将数据传递给子组件。子组件接收到这些数据后，可以根据数据进行渲染或执行其他操作。

类比理解：

可以将 props 想象成一个邮递员。父组件是寄件人，子组件是收件人。父组件将数据（信件）通过props（邮递员）传递给子组件。子组件收到数据后，可以根据数据内容进行处理。

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

以下是关于 props 的一些要点：

声明: 组件需要显式声明它所接受的 props，以便 Vue 知道哪些是外部传入的 props。

使用: 子组件通过定义 props 来接收父组件传递的数据，并可以根据这些数据进行渲染或执行其他操作。

动态访问: 开发者可以动态访问和操作传入的props，提高组件间数据传递的效率。

应用场景：对于一个新功能，结构、交互、样式都与已有的组件一样，唯独数据不一样。

理解并合理运用 props 将帮助开发者构建更加健壮、可维护的 Vue 应用。

1、传递数据/函数：

举例：

<StudentList name="张三" :age="16" sex="男"/>

<template> <div class="app"> <h1>{{ msg }}</h1> <!-- 把【showName函数】赋值给 名为【Name】的属性。--> <!--此时的Name被单向绑定，子组件只需接收Name属性，数据就会存入SchoolList组件实例对象身上 --> <SchoolList :Name = "showName"/> </div> </template> <script> import SchoolList from './components/SchoolList.vue'; import StudentList from './components/StudentList.vue'; export default { name:'App', components:{SchoolList,StudentList}, data() { return { msg:'你好啊！' } }, methods:{ showName(a){ alert(a) } } } </script>

说明：

1、传值时默认传递的是字符串类型的值，可通过v-bind指令【简写为:】传递其他不同数据类型的值、表达式等。
2、传递的值/函数通过props在子组件接收后会存在传值的组件标签【子组件】的实例对象(vc)身上的。

3、props配置项优先级比data配置项高，所以，在data里可以直接引用props里的属性值【需加this】。

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

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

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

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

props:{ name:String, age:Number, sex:String }

说明：

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

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

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【vue开发者工具】可以非常容易分开。
（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

<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

<template> <div> <h2 v-text="StudentMessage" class="student"></h2> <div class="studentList"> <h4>姓名：{{ name }}</h4> <h4>性别：{{ sex }}</h4> <h4>年龄：{{ age }}</h4> </div> <input type="button" value="点击修改年龄+1" @click="addAge" /> <h4>修改后的年龄：{{ MyAge }}</h4> </div> </template> <script> export default { name: "StudentList", data() { return { StudentMessage: "学生信息", MyAge: this.age, }; }, // 简单声明接收 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, // }, // }, methods: { addAge() { this.MyAge = this.MyAge + 1; }, }, }; </script> <style> .student { background-color: cadetblue; } .studentList { background-color: dimgray; } </style>

App.vue

<template> <div> <h1 v-text="SchoolMessage" ref="title"></h1> <hr /> <SchoolList ref="sch" /> <StudentList name="张三" :age="16" sex="男" ref="stu" /> <StudentList name="李四" :age="18" sex="女" /> <StudentList name="王五" :age="21" sex="男" /> <button @click="MessageTip_title" ref="btn"> 点我输出 <span>“标题”</span>的<span>“真实DOM元素”</span> </button> <br /> <button @click="MessageTip_button"> 点我输出<span>“此按钮”</span>的<span>“真实DOM元素”</span> </button> <br /> <button @click="MessageTip_SchoolList"> 点我输出<span>“子组件SchoolList”</span>的<span>“实例对象”</span> </button> <br /> <button @click="MessageTip_StudentList"> 点我输出<span>“子组件StudentList”</span>的<span>“实例对象”</span> </button> </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_title() { // 标题的真实DOM元素 console.log(this.$refs.title); }, MessageTip_button() { // 按钮的真实DOM元素 console.log(this.$refs.btn); }, MessageTip_SchoolList() { // SchoolList子组件的实例对象 console.log(this.$refs.sch); }, MessageTip_StudentList() { // StudentList子组件的实例对象 console.log(this.$refs.stu); }, }, }; </script> <style> button { width: 400px; height: 50px; font-size: 16px; font-weight: bold; } span { color: green; } </style>