ref属性:1.被用来给DOM元素(html、button、span等)或子组件实例(比如SchoolList等)创建引用标识(相当于js中需要操作DOM节点时(document.getElementById)临时为该节点创建了的id以便操作节点)。2.应用在html标签上获取的是真实DOM元素应用在组件标签上是组件实例对象(vc)3.使用方式(举例)打标识h1 refxxx.../h1或 School refxxx/School获取【School组件实例对象】this.$refs.xxxApp.vuetemplate div h1 v-textSchoolMessage reftitle/h1 button clickmessageTip refbtn点我输出上方的DOM元素/button hr SchoolList refsch/ StudentList name张三 :age16 sex男/ StudentList name李四 :age18 sex女/ StudentList name王五 :age21 sex男/ /div /templateprops配置项在 Vue 中propsproperties【属性】 的缩写是子组件声明的一组属性父组件可以通过这些属性向子组件传递数据。props 是组件之间传递数据的一种方式。在 Vue.js 中父组件可以通过props将数据传递给子组件。子组件接收到这些数据后可以根据数据进行渲染或执行其他操作。类比理解可以将 props 想象成一个邮递员。父组件是寄件人子组件是收件人。父组件将数据信件通过props邮递员传递给子组件。子组件收到数据后可以根据数据内容进行处理。功能让组件接收外部传过来的数据/方法。以下是关于 props 的一些要点声明: 组件需要显式声明它所接受的 props以便 Vue 知道哪些是外部传入的 props。使用: 子组件通过定义 props 来接收父组件传递的数据并可以根据这些数据进行渲染或执行其他操作。动态访问: 开发者可以动态访问和操作传入的props提高组件间数据传递的效率。应用场景对于一个新功能结构、交互、样式都与已有的组件一样唯独数据不一样。理解并合理运用 props 将帮助开发者构建更加健壮、可维护的 Vue 应用。1、传递数据/函数举例StudentList name张三 :age16 sex男/template div classapp 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【接收的同时对数据进行类型限制默认值的指定必要性的限制】。注意1props中配置的属性会出现在组件实例对象身上但不会出现在_data中。2vc身上会显示data中的属性和props声明接收的属性二者不容易区分通过Vue Devtools【vue开发者工具】可以非常容易分开。3只要是组件实例对象身上有的属性和方法模板中都可以直接使用。4props中不要配置一定不会传值的属性否则接收不到值就是undefined没有意义。5通过props接收到的属性值不要在组件中进行修改如果非要修改可以修改成功但会报警告因为Vue不建议这么做。6如果组件的data中有了变量nameprops中也声明了要接收nameprops优先级更高【最终生效的是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组件中的方法addB组件中调用add方法传递的参数A组件中的方法也是能够接收到的通过方法的参数实现了B组件向A组件中传递数据的功能。备注props是只读的Vue底层会监测你对props的修改如果进行了修改就会发出警告若业务需求确实需要修改那么请在data中定义一个中间变量接收props中的某个属性然后去修改data中的中间变量当然组件中模板引用的也必须是data中的中间变量。代码示例SchoolList.vuetemplate div classschool 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; } /styleStudentList.vuetemplate div h2 v-textStudentMessage classstudent/h2 div classstudentList h4姓名{{ name }}/h4 h4性别{{ sex }}/h4 h4年龄{{ age }}/h4 /div input typebutton value点击修改年龄1 clickaddAge / 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; } /styleApp.vuetemplate div h1 v-textSchoolMessage reftitle/h1 hr / SchoolList refsch / StudentList name张三 :age16 sex男 refstu / StudentList name李四 :age18 sex女 / StudentList name王五 :age21 sex男 / button clickMessageTip_title refbtn 点我输出 span“标题”/span的span“真实DOM元素”/span /button br / button clickMessageTip_button 点我输出span“此按钮”/span的span“真实DOM元素”/span /button br / button clickMessageTip_SchoolList 点我输出span“子组件SchoolList”/span的span“实例对象”/span /button br / button clickMessageTip_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