Vue.js 中的 ref 属性与组件 Props 深入理解

"Vue.js基础知识，包括ref属性的使用和组件间的数据传递——props特性" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，`ref`属性和`props`是两个重要的概念，它们分别帮助我们实现对DOM元素的引用以及组件间的数据通信。 ### 1. ref属性 `ref`属性主要用于获取Vue实例中对应的DOM元素或组件实例。Vue提供了两种主要的使用方式： 1. **应用在HTML标签上**：当你在HTML元素上添加`ref`属性，Vue会在该元素渲染完成后，在Vue实例的`$refs`对象中创建一个对应的引用。例如，`<h1 ref="xxx"></h1>`，你可以通过`this.$refs.xxx`来访问这个元素的真实DOM节点。 2. **应用在组件标签上**：如果你在自定义组件上使用`ref`，则`this.$refs`中的引用将是该组件的实例对象，而不是DOM元素。例如，`<School ref="sch"/>`，你可以通过`this.$refs.sch`来访问School组件的实例，从而调用组件内部的方法或访问组件状态。 在给出的示例中： ```vue <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch"/> ``` `showDOM`方法展示了如何通过`this.$refs`访问并打印出DOM元素和组件实例： ```vue methods: { showDOM() { console.log(this.$refs.title); // 真实DOM元素 console.log(this.$refs.btn); // 真实DOM元素 console.log(this.$refs.sch); // School组件的实例对象 }, } ``` ### 2. props配置项 `props`是Vue组件之间传递数据的基本机制，它允许父组件向子组件传递数据。有三种不同的方式来声明和限制props： 1. **简单声明**：通过数组直接列出要接收的prop名称，如`props: ['name', 'age', 'sex']`。 2. **限制类型**：通过对象声明并指定每个prop的数据类型，如`props: { name: String, age: Number, sex: String }`。 3. **全面控制**：进一步可以指定prop是否必需、默认值等，如： ```vue props: { name: { type: String, // 类型是字符串 required: true, // 必须提供 default: '张三' // 默认值为'张三' }, age: { type: Number, // 类型是数字 // ...其他限制条件 } } ``` 注意，props是只读的，这意味着在子组件内部不能直接修改prop的值。如果需要在子组件中修改prop的值，应将prop的值复制到`data`对象中，并在`data`中进行修改，因为`data`中的属性是可变的。 在给出的另一个示例中，展示了如何在模板中使用`props`接收外部数据： ```vue <template> <div> <Student name="李四" sex="女" :age="18" /> </div> </template> ``` 在这个例子中，`Student`组件通过`props`接收了`name`、`sex`和`age`三个属性，这些属性的值分别来自父组件。 Vue的`ref`属性和`props`特性是开发过程中非常实用的功能，它们帮助开发者更好地管理和操作DOM元素，以及在组件之间有效地传递数据。