一、ref可实现数据动态监听,也可用于获取dom节点,父组件调用子组件方法或变量
基本用法,本页面获取dom元素
<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>
调用子组件中的方法
子组件:
<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>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
this.$refs.hello.open();
}
}
};
</script>
二、在使用vue-cli构建项目,在默认情况下,执行 npm run build/yarn build会将所有的js打包成一个整体,vue为单页面应用,同步加载大量的页面代码会导致页面长时间处于空白情况。使用该方法来异步加载所需页面来提升加载速度。此适用于项目比较大的情况下,如果就只有几个页面的情况,不建议使用该功能。
写法对比:
import { defineAsyncComponent, defineComponent,reactive,ref } from 'vue';
import sonVue from '../components/son.vue';
export default defineComponent({
components:{
sonVue,
'sonVue2': defineAsyncComponent(()=>import('../components/son2.vue'))
},
setup:{}
})