搜索词>>vuejs 耗时0.0210
  • vue ref 使用教程

    一.vue ref基本用法:本页面获取dom元素$title(t1.vue) <template>l; <div id="app">l; <div ref="testDom">l;11111</div>l; <button @click一.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获取本页面元素调试提示: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> 调试:​