ref和$ref
在Vue中，$ref是一个特殊的属性，它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符，然后在Vue实例中使用$ref来访问该组件或元素。类似于id选择器。
例如，假设您有一个组件：
点击查看代码
<template>
<div>
<input type="text" ref="myInput">
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
export default {
methods: {
focusInput() {
this.$refs.myInput.focus();
},
},
};
</script>
在上面的组件中，我们有一个输入框和一个按钮，点击按钮将调用focusInput()方法来将焦点设置到输入框。我们使用了ref="myInput"属性，这意味着我们可以在Vue实例中使用this.$refs.myInput来引用输入框元素。
$refs属性可以引用带有ref属性的组件或元素。但是，应该谨慎使用$refs，以避免破坏Vue的响应性能。在大多数情况下，最好使用props和事件来实现组件之间的通信。
props
在Vue.js中，props是一种向子组件传递数据的方式。将props添加到子组件中，可以在父组件中传递数据到子组件。这样就可以实现组件之间的数据通信。
可以在子组件中定义一个props，然后在父级组件中通过v-bind指令将数据传递给子组件。在子组件中，可以通过props属性来获取数据。
例如，一个名为HelloWorld的子组件可以定义如下的props：
Vue.component('HelloWorld', {
props: {
message: String
},
template: '<div>{{ message }}</div>'
})
这里定义了一个名为message的props，它的类型是String。在子组件的模板中，使用{{ message }}展示prop传递的数据。
在父级组件中，可以通过v-bind指令将数据传递给子组件：
<HelloWorld message="Hello, World!"></HelloWorld>
这样，父级组件就会将一个名为message，值为“Hello, World!”的prop传递给子组件。子组件会将这个值渲染到模板中，显示出“Hello, World!”这个文本。我们也可以用v-bind来动态绑定message的值：
<HelloWorld v-bind:message="parentMessage"></HelloWorld>
这里的parentMessage是父级组件的一个数据属性。通过v-bind指令动态绑定message的值，可以实现动态更新子组件的数据。
总的来说，props是一种很实用的组件通信方式，它可以让Vue.js中的组件之间更灵活地传递数据。