web-dev-qa-db-ja.com

VueJS 2-$ emitを使用してパラメーターを渡す方法

私はVueJS 2を使用してモーダルコンポーネントに取り組んでいます。今のところ、基本的には機能しています。ボタンをクリックすると、モーダルが開きます。

ここでやりたいことは、モーダルの一意の名前を作成し、ボタンをその特定のボタンに関連付けることです。

これは私が念頭に置いているものです。モーダルには、一意の名前プロパティがあります。

_<modal name='myName'>CONTENT</modal>_

そして、これは関連ボタンになります。

<button @click="showModal('myName')"></button>

私が理解する必要があるのは、showModalのパラメーターをモーダルコンポーネントに渡す方法です。

ルートvueインスタンス（つまり、モーダルコンポーネント内ではない）で使用しているメソッドは次のとおりです。

_methods: {
    showModal(name) { this.bus.$emit('showModal'); },
}
_

私がやりたいのは、コンポーネントのnameプロパティにアクセスすることです。次のようなものです。

_created() {
    this.bus.$on('showModal', () => alert(this.name));
}
_

しかし、これはundefinedとして表示されます。

それで、私は何を間違っていますか？モーダルコンポーネント内のnameプロパティにアクセスするにはどうすればよいですか？

注：this.bus。$ onが何であるか疑問に思っている場合は、前に質問した次の回答を参照してください。 https://stackoverflow.com/a/42983494/747767

javascriptvue.jsvuejs2vue-component
21
Moshe

パラメーターとして$emitに渡します。

methods: {
    showModal(name) { this.bus.$emit('showModal', name); },
}

created() {
    this.bus.$on('showModal', (name) => alert(name));
}

また、モーダルに名前を付けたい場合は、モーダルコンポーネントの小道具として受け入れる必要があります。

Vue.component("modal",{
    props:["name"],
    ...
})

次に、あなたは次のようなことをしたいと思うでしょう、

if (name == this.name)
    //show the modal
27
Bert