ref
????給元素或子組件添加ref屬性朱巨，則該元素或者子組件實(shí)例對(duì)象會(huì)被添加到當(dāng)前組件實(shí)例對(duì)象下的$refs屬性中
$refs
????該屬性是一個(gè)對(duì)象，存儲(chǔ)了通過(guò)ref綁定的元素對(duì)象或子組件實(shí)例對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
</head>
<body>
? ? <div id="app">
? ? ? ? <h1>{{title}}</h1>
? ? ? ? <button @click="getBoxHeight">獲取 box 的高度</button>
? ? ? ? <button @click="getKKBComponent">獲取自定義組件實(shí)例及內(nèi)部方法</button>
? ? ? ? <hr>
? ? ? ? <div ref="box">
? ? ? ? ? ? 這是內(nèi)容<br>這是內(nèi)容<br>這是內(nèi)容<br>這是內(nèi)容<br>這是內(nèi)容<br>
? ? ? ? </div>
? ? ? ? <hr>
? ? ? ? <kkb-component ref="kkb" :t="title"></kkb-component>
? ? </div>
? ? <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
? ? <script>
? ? ? ? const kkbComponent = {
? ? ? ? ? ? props: ['t'],
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? isShow: true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? <div v-if="isShow">
? ? ? ? ? ? ? ? ? ? <h1>kkbComponent - {{t}}</h1>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? `,
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? hide() {
? ? ? ? ? ? ? ? ? ? this.isShow = false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? title: '開(kāi)課吧'
? ? ? ? ? ? },
? ? ? ? ? ? components: {
? ? ? ? ? ? ? ? 'kkb-component': kkbComponent
? ? ? ? ? ? },
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? console.log(this.$refs.kkb);
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? getBoxHeight() {
? ? ? ? ? ? ? ? ? ? console.log( this.$refs.box.clientHeight );
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? getKKBComponent() {
? ? ? ? ? ? ? ? ? ? this.$refs.kkb.hide();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? </script>
</body>
</html>
