コンポーネントとスロット
グローバルアウトブレイクマップ（クリックして中国の地図を入力）クリックしてアップロードgithubアドレス
一部の国での翻訳の問題のため、データのレンダリングに失敗しました。個々の国の名前を手動で翻訳できます。記事エントリのオンラインアドレスを
実装します。クリックして入力
成分
テンプレート要素を自分で定義する
コンポーネントを宣言する
HTMLで
app.component（）
この方法はグローバル登録です
<div id="app">
<button-my></button-my>
</div>
const app = Vue.createApp({})
app.component('button-my',{
data(){
return {
count: 0
}
},
template:`<button @click="count++">点击增加count</button>
<div>count = {
{ count }} </div>`
})
app.mount('#app')
VUEプロジェクトでは
vueプロジェクトの場合
ステートメント
<template>
<div>
<button @click="count++">点击增加count</button>
<div>count = {
{ count }}</div>
</div>
</template>
<script>
export default {
name: "button-my",
data() {
return {
count: 0
};
}
};
</script>
<style scoped></style>
使用する
<template>
<div>
<button-my></button-my>
</div>
</template>
<script>
import ButtonMy from "../components/button-my";
export default {
name: "Tests",
components: {
ButtonMy}
}
</script>
<style scoped>
</style>
小道具の価値の移転
今すぐコンポーネントを変更する
<template>
<div>
<h2>{
{ title }}</h2>
<button @click="count++">点击增加count</button>
<div>count = {
{ count }}</div>
</div>
</template>
<script>
export default {
name: "button-my",
data() {
return {
count: 0
};
},
// eslint-disable-next-line vue/no-dupe-keys
props: ["title"]
};
</script>
使用されている値を渡します
<button-my title="I,dog"></button-my>
コンポーネントイベントを聞く
子コンポーネントは
、親コンポーネントのchangeTextsによってトリガーされるchangeText（）関数にemitを書き込みます。詳細について
は、以下の親コンポーネントを参照してください。
<template>
<div>
<h2>{
{ title }}</h2>
<button @click="count++">点击增加count</button>
<div>count = {
{ count }}</div>
<button @click="changeText">改变标题</button>
</div>
</template>
<script>
export default {
name: "button-my",
data() {
return {
count: 0
};
},
methods: {
changeText() {
this.$emit("changeTexts");
}
},
// eslint-disable-next-line vue/no-dupe-keys
props: ["title"]
};
</script>
<style scoped></style>
親コンポーネント
<template>
<div>
<button-my :title="text" @changeTexts="(text='我是狗')"></button-my>
</div>
</template>
<script>
import ButtonMy from "../components/button-my";
export default {
name: "Tests",
components: {
ButtonMy },
data(){
return{
text:"I,dog"
}
}
};
</script>
<style scoped></style>
使用するシーン
スロットと動的テンプレート
コンポーネントは複数回使用されます。たとえば
、すべてのページのポップアップウィンドウはこのコンポーネントを使用しますが、ポップアップウィンドウのコンテンツは動的に変更されます。詳細について
は、次のスロットの使用を参照してください。
下期
スロットの使用法
みなさん、こんにちは。私は「犬」であり、何千マイルも肉を食べることができるので、ソフトウェアカレッジのネットワークエンジニアリングの学生であるコードハスキーです。大学時代に学んだことをみんなと共有し、進歩していきたいです。ただし、レベルに限りがあるため、必然的にブログに間違いがありますので、抜けがありましたらお知らせください！当面は、csdnプラットフォームのブログホームページ（https://blog.csdn.net/qq_42027681）でのみ更新してください。
未经本人允许，禁止转载
後で発売されます
フロントエンド：vueエントリvue開発アップルレットなど。
バックエンド：javaエントリspringbootエントリなど。
サーバー：mysqlエントリサーバープロジェクトを実行するための簡単な指示クラウドサーバー
python：ウォームアップしないことをお勧めし
ます。いくつかのプラグインなどの使用を確認してください。
大学のやり方も自分自身で、一生懸命勉強し、
情熱を持って若くなります。プログラミングに興味がある場合は、qqグループに参加して一緒にコミュニケーションをとることができます：974178910
ご不明な点がございましたら、下にメッセージを残していただければ、よろしければ返信いたします。