vue ref 使用教程

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(4071)   2024-03-16 09:31:19

一.vue ref基本用法:本页面获取dom元素

$title(t1.vue)
<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

调试上面的代码:

vuejs ref获取本页面元素调试
vuejs ref获取本页面元素调试

提示:ref除了可以获取本页面的dom元素,还可以拿到子组件中的data和去调用子组件中的方法

二.vue ref获取子组件中的data

$title(子组件)
<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>

 

$title(父组件)
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>

调试:
父子组件调试

 

三.vue ref调用子组件中的方法

$title(子组件)
<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用到了")
    }
  }
}
</script>

 

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

$title(父组件)
<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open();
    }
  }
};
</script>

调试:
调用子组件
 

四.vue ref子组件调用父组件方法

$title(子组件)
<template>
  <div>
</div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用了");
      //  调用父组件方法
      this.$emit("refreshData");
    }
  }
}
</script>

 

$title(父组件)
<template>
  <div id="app">
    <HelloWorld ref="hello" @refreshData="getData"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open()
    },
    getData() {
      console.log('111111')
    }
  }
};
</script>

调试:
调试

标签: vuejs ref
地址:https://www.leftso.com/article/621.html

相关阅读

一.vue ref基本用法:本页面获取dom元素$title(t1.vue) &lt;template&gtl; &lt;div id="app"&gtl; &lt;div r...
最终效果图  实现逻辑和代码 html代码   &lt;el-table       :data="renderDynamic"       ref="produc...