前言

如果觉得本文有帮助 记得点赞三连哦 十分感谢！ 注意:js中想要获取dom节点一般用document.querySelecto('.input'),然后获取input的值。 在vue中绑定ref就不需要在获取dom节点了，直接绑定在input上，然后$refs调用即可

1.基本用法

<div id="app">
  <input type="text" ref="input"/>
  <button @click="add">添加</button>
</div>
<script>
    new Vue({
      el: "#app",
      methods:{
      add:function(){
        this.$refs.input.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
        }
      }
    })
</script>

在javascript调用:this.$refs.input

2.获取子组件中的data

• 子组件

<template>
  <div>{{ msg }}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: "ref语法糖"
    }
  }
}
</script>

• 父组件

<template>
  <div id="app">
    <Save ref="save"/>
    <button @click="setResult">获取Save(子组件)中的值</button>
  </div>
</template>
<script>
import Save from "./components/Save.vue";
export default {
  components: {
    Save
  },
  data() {
    return {}
  },
  methods: {
    setResult() {
      console.log(this.$refs.save.msg) //ref语法糖
    }
  }
};
</script>

3.调用子组件中的方法

• 子组件

<template>
  <div></div>
</template>
<script>
export default {
  methods:{
    open(){
      console.log('我是子组件')
    }
  }
}
</script>

• 父组件

<template>
  <div id="app">
    <Save ref="save"/>
    <button @click="setResult">获取Save(子组件)中的值</button>
  </div>
</template>
<script>
import Save from "./components/Save.vue";

export default {
  components: {
    Save
  },
  data() {
    return {}
  },
  methods: {
    setResult() {
      this.$refs.save.open();// 我是子组件
    }
  }
};
</script>

4.子组件调用父组件方法

• 子组件

<template>
  <div></div>
</template>
<script>
export default {
  methods: {
    open() {
      this.$emit("refData");  //我是父组件
    }
  }
}
</script>

• 父组件

<template>
  <div id="app">
    <Save ref="save" @refData="setData"/>
    <button @click="setResult">获取Save(子组件)中的值</button>
  </div>
</template>
<script>
import Save from "./components/Save.vue";
export default {
  components: {
    Save
  },
  data() {
    return {}
  },
  methods: {
    setResult() {
      this.$refs.save.open()
    },
    setData() {
      console.log('我是父组件')
    }
  }
};
</script>