通过$refs 给子组件传值

在Vue.js中，`$refs` 是一种特殊属性，它允许你在运行时访问到已渲染元素的DOM引用。当你需要从父组件向子组件传递数据时，通常我们不会直接使用 `$refs` 进行双向绑定，因为这并不是Vue设计的初衷，而是更多用于获取子组件实例以便于手动操作。

如果你想要从父组件给子组件传递值，并在子组件中读取这个值，可以按照以下步骤操作：

1. **在父组件中**，在data里声明你需要传递的值：

   export default {
     data() {
       return {
         childValue: '初始值'
       };
     },
   }

2. **在模板中**，使用 `ref` 属性来引用子组件，并存储这个引用：

   <child-component ref="myChild"></child-component>

3. **在父组件的方法中**，你可以通过`.value`来访问并修改这个值：

   methods: {
     updateChildValue(newVal) {
       this.$refs.myChild.value = newVal;
     }
   }

4. **在子组件中**，可以通过 `props` 接收父组件传来的值，如果不需要改变这个值，可以直接使用：

   // 子组件.vue
   props: ['value'],
   created() {
       console.log('子组件接收到的值:', this.value);
   }