vue3変更のオプションがvue2組み合わせAPIに変更され、合計がにdata統合される ため、用途は異なりますが、違いは悪くありません。methodssetup
1.definePropsメソッド
親コンポーネントは、データ バインディングの形式で渡されるデータを宣言し、子コンポーネントは、defineProperty() メソッドを通じて props オブジェクトを作成し、親コンポーネントからデータを取得します。
親コンポーネント内:
<!-- data是我们要传递的数据 -->
<child-components :data="data"></child-components>サブコンポーネント内:
なお、ここで親コンポーネントが渡す値はvue2とあまり変わりませんが、データを受け取るためにdefinePropsを導入し、このdefinePropsを取得する変数を使用する必要があります。
<template>
<ul>
<li v-for="i in props.data" :key="i">{
{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
data: {
type: Array,
default: () => [],
},
})
</script>
2.defineEmitsメソッド
サブコンポーネント内:
<script setup>
import { defineEmits} from 'vue'
methods:{
const emits = defineEmits(['add'])
emits('add', 1)
}
</script>親コンポーネント内:
<!-- add是子组件要传递的动作,handleAdd是监听到之后执行的事件 -->
<child-components @add="handleAdd"></child-components>
<script>
const list = ref([1,2,3])
const handleAdd = value => {
list.value.push(value)
}
</script>
3. ミット兄弟が値を渡す
コードを整理するために、多くのコンポーネントを使用して完全なページを構築します。
でも、何か書くのが間違っています。これは vue3 です。あまり文法に詳しくありません。あえてこのように書きます。恐怖と混乱を感じながら書いています。
ホームフィールドを入力してください:
兄弟コンポーネント間で値を渡すにはプラグインが必要です: mitt
最初の一歩
npm imitをインストールする
ここでの習慣は、vue2 を使用して値を渡し、バスをミドルウェアとして使用することです
mitt ミドルウェアをダウンロードした後、このインスタンスを js ファイルにインポートし、受け取る変数を定義して、最後にエクスポートします。
使用する場合、両方のコンポーネントでこのインスタンス ファイルをインポートする必要があります
ブラザーコンポーネントの納品:
<script setup>
import emitter from '@until/bus.js'
methods:{
getData() {
emitter.emit('event',this.addDialogFlag)
}
}
</script>ディスパッチするとき、イベントの前にイベントがあり、その後に渡されるパラメータが続きます。
兄弟コンポーネントは以下を受け入れます:
<script setup>
import emitter from '@until/bus.js'
onMounted() {
emitter.on('event',e=>{
this.data.username = e;
this.getData();
})
}
</script>onMounted() サイクルで受信する必要があります。ここでは、emitter.on() を使用します。
おじいちゃんと孫のコンポーネントは VueX の値を渡します
Vuex は Vue 公式サイトにある状態管理ツールで、これを利用することで先祖コンポーネント間の通信を簡単に実現できます。
添付:definePropsとdefineEmitは値を渡す際に必須ではなく、導入しなくても値を渡す効果は得られます。不要なエラー報告を避けるために導入することをお勧めします