vue学习-模板引用

模板引用ref，获得dom元素实例，可以进行一些操作

<input type="text" ref="input" />

this.$refs.input.focus()

也可以加在子组件上，调用子组件的methods，修改子组件的data

<ref-child :ref="refName"></ref-child>

data() {
  return {
    refName: "childComponent",
  };
},
mounted() {
  this.$refs.childComponent.log();
  this.$refs.childComponent.data = "changed data";
},

data() {
  return {
    data: "chilid data",
  };
},
methods: {
  log() {
    console.log("child log");
  },
}

$refs 只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。