vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue中this.$refs的使用

Vue中this.$refs的使用及说明

作者:咸鱼妹妹

Vue中this.$refs用于访问通过ref注册的元素或组件,需在mounted后使用,可在JS操作DOM或调用子组件方法,注意避免模板中直接使用

Vue使用this.$refs

父组件

<template>
    <div>
      <!-- 
        ref 写在标签上时:this.$refs.名字  获取的是标签对应的dom元素
        ref写在组件上时:这时候获取到的是子组件(比如navChild)的引用  
      -->
      <Child ref="navChild"/>
    </div>
</template>

<script>
import Child from "@/components/child";
export default {
  name: "App",
  methods: {
    navFn(){
      // this.$refs.navChild 或者 this.$refs['navChild']

      // 第一种使用情况(父组件调用子组件的方法)
      this.$ref.navChild.initData();

      // 第二种使用情况(父组件调用子组件的方法,并通过方法传值)
      this.$refs.navChild.initData('我是父组件的传值')

      // 第四种使用情况(父组件获取子组件的数据)
      this.$ref.navChild.status

      // 第四种使用情况(父组件获取子组件的数据,并改变数据)
      this.$ref.navChild.status = 1;
    }
  },
};
</script>

子组件

<template>
    <div>
      <div>{{message}}</div>
    </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      message:'这是子组件',
      status:0
    };
  },
  components: {},
  created() {
      console.log(this.$data.status); //1(通过this.$data获取所有变量)
      this.status = this.$data.status;
  },
  methods:{
    initData(val){
      // 方法二:获取父组件的传值
      console.log(val); //我是父组件的传值
      this.message = val;

      let name = 'Hello World';
    }
  }
};
</script>

<style scoped>
</style>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文