1. コンポーネントインスタンスを取得する際、refの前にコロンを書かないでください。
ref を通じて取得されたコンポーネントのプロパティまたはメソッドは、サブコンポーネントによって返される必要があることに注意してください。
詳細は以下の通り
<!--templateteb タグの内容-->
<!-- 注: ref の前にコロンを置くことはできません -->
<h1 ref="title">私がタイトルです</h1>
<child ref="child"></child>
//setup関数内の内容
// ref を通じてコンポーネントのインスタンスを取得します
const 子 = ref(null)
const title = ref(null)
//マウント完了後にインスタンスを取得する
onMounted(() => {
console.log(child.value)
console.log(タイトル.値)
child.value.hh()
})
レンダリングは次のとおりです
2. コンポーネントの紹介
フラグメントコンポーネント
vue2.x では、コンポーネント テンプレートにルート タグが必要ですが、vue3.x ではルート タグは必要なくなり、フラグメントが自動的に作成されます。
<テンプレート>
<div>私は説明です</div>
<h3>私がタイトルです</h3>
</テンプレート>
<スクリプト>
デフォルトの {} をエクスポートします。
</script>
<スタイル></スタイル>
3.サスペンス要素
非同期コンポーネントをロードするときに、他のコンテンツをレンダリングします。
app.vue
<テンプレート>
<div class="app">
<サスペンス>
<テンプレート v-スロット:デフォルト>
<子供>
</テンプレート>
<テンプレート v-スロット:フォールバック>
<h1>読み込み中...</h1>
</テンプレート>
</サスペンス>
</div>
</テンプレート>
<スクリプト>
// import Child from './Child.vue'; // プログラムは起動時にパッケージ化されコンパイルされます
//defineAsyncComponent メソッドをインポートして、非同期読み込みコンポーネントを定義します
「vue」からインポート {defineAsyncComponent};
const Child =defineAsyncComponent(() => import("./Child.vue"));
デフォルトのエクスポート {
コンポーネント: {
子供、
}、
};
</script>
<スタイルスコープ>
。アプリ {
背景色: #eee;
パディング: 30px;
}
</スタイル>
child.vue
<template>
<div class="child">我是子组件</div>
</template>
<script>
export default {};
</script>
<style scoped>
.child {
border: 2px solid red;
margin: 20px;
padding: 20px;
}
</style>
4.テレポートコンポーネント
機能: 指定された DOM コンテンツを指定されたノードに移動します (指定されたノードにコンポーネントをマウントすると理解できます) 使用シナリオ: ポップアップ ボックスとプレーヤー コンポーネントの配置
ダイアログ.vue
<template>
<div class="dialog">我是弹框</div>
</template>
<script>
export default {};
</script>
<style scoped>
.dialog {
width: 300px;
height: 300px;
padding: 30px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>app.vue
<template>
<div class="app">
<h3>我是标题</h3>
<h1>我是一级标题</h1>
<div id="test">
<!-- to属性的值为选择器，表示放在哪个节点下面 -->
<teleport to="body">
<Dialog />
</teleport>
</div>
</div>
</template>
<script>
import Dialog from "./Dialog.vue";
export default {
components: {
Dialog,
},
};
</script>
<style scoped>
.app {
background-color: #eee;
padding: 30px;
}
</style>
演算結果
