# Vue与ref属性与refs

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

// 用法一、本页面获取dom元素
<template>
  <div>
    <div id="app">
      <div ref="Dom">666</div>
      <button @click="getTest">获取test节点</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    getTest() {
      console.log(this.$refs.Dom);
    }
  }
};
</script>

//用法二、获取子组件中的data和去调用子组件中的方法 :获取子组件中的data

//子组件
<template>
  <div>  {{ Message}}</div>
</template>
<script>
export default {
  data() {
    return {
        Message:"你好"
    };
  }
};
</script>


// 父组件

<template>
  <div>
    <div id="app">
     <index ref="hello"></index>
      <button @click="getTest">获取子组件节点</button>
    </div>
  </div>
</template>
<script>
import index from "./chilan/index"
export default {
  components:{
    index
  },
  data() {
    return {};
  },
  methods: {
    getTest() {
      console.log(this.$refs.hello.Message);
    }
  }
};
</script>

效果图：

image.png

//用法三、 父组件调用子组件中的方法

//子组件
<template>
  <div>  {{ Message}}</div>
</template>
<script>
export default {
  data() {
    return {
        Message:"你好"
    };
  },
  methods:{
      getlist(){
          console.log("你好呀！")
      }
  }
};
</script>

//父组件
<template>
  <div>
    <div id="app">
     <index ref="hello"></index>
      <button @click="getTest">调用子组件事件</button>
    </div>
  </div>
</template>
<script>
import index from "./chilan/index"
export default {
  components:{
    index
  },
  data() {
    return {};
  },
  methods: {
    getTest() {
      this.$refs.hello.getlist();
    }
  }
};
</script>

效果：

image.png

//方法四
//子组件调用父组件方法

//子组件
<template>
  <div>  {{ Message}}</div>
</template>
<script>
export default {
  data() {
    return {
        Message:"你好"
    };
  },
  methods:{
      getlist(){
         this.$emit("refreshData");
      }
  }
};
</script>

//父组件
<template>
  <div>
    <div id="app">
     <index ref="hello"  @refreshData="getData"></index>
      <button @click="getTest">获取hello</button>
    </div>
  </div>
</template>
<script>
import index from "./chilan/index"
export default {
  components:{
    index
  },
  data() {
    return {};
  },
  methods: {
    getTest() {
      this.$refs.hello.getlist();
    },
     getData() {
      console.log('父组件')
    }
  }
};
</script>

效果：

image.png