プロジェクトのシナリオ:
(下の図に示すように) 背景を作成するときに発生するニーズについては、ポップアップに入力するには情報が多すぎるため、ボタンをクリックしてポップアップ ウィンドウをポップアップし、いくつかの情報を入力して送信します。アップウィンドウは、このページのコードが長くなりすぎないようにするため、ポップアップウィンドウをコンポーネントに別途カプセル化し、親から子に値を渡すことでポップアップウィンドウの開閉を制御します
ピットを踏む：
親と子の間で値を渡す方法として props と $emit を使用する
- watch は最初に渡された値が変更された場合にのみ機能します
- 息子から父親は働いていない
原因分析:
よくよく調べてみると、ポップアップウィンドウが出るかどうかの条件として親コンポーネントから渡された値を使っているので、ポップアップ後に値を変更して返すようにしているのですが、**vue が推奨していないため親コンポーネントから渡された props を子コンポーネントで直接変更すると、値の値がエラー** を報告します。これにより、子コンポーネントは値の変更に失敗するため、親コンポーネントの値は変更されません。そして監視は機能しません解決：
親コンポーネントから渡された値を置き換えるために作成された子コンポーネントのライフサイクルに新しい値を定義するだけです。コードは以下に直接追加されます。
親ページ。インポートを使用して子コンポーネントを登録し、定義します
<template>
<div>
…………
// 自定义的组件**new-channel-dialog**，这个名字要和子组件的name相同mopenKey是传给子组件的值，
// loseNewChannel事件用于接收子组件的回调
<new-channel-dialog :open-key="openKey" @closeNewChannel="closeNewChannel" />
</div>
</template>
import newChannelDialog from './newChannelDialog.vue' // 这个路径看你自己写的位置
export default {
components: {
newChannelDialog
},
data() {
return {
openKey: 0, // 设置传值的初始值为0
…………
}
}
…………
// 这里写两个事件
// 打开弹窗事件，在点击按钮的时候触发，触发后改变openKey的值，传给子组件
openDialog() {
this.openKey = 1
},
// 关闭弹窗的回调
closeNewChannel(data) {
console.log(data) // 这里的data是子组件传回来的值，对应的就是子组件传过来的newOpenKey
this.openKey = data
}
}
サブページ、
// 写props用于接收父组件的传值
export default {
props: {
openKey: {
type: Number, //类型
required: true
}
},
data() {
return {
newOpenKey: '', //定义一个新字段替换父组件传的字段
…………
}
},
// watch监听传值的变化
watch: {
openKey: {
deep: true,
immediate: true,
handler: function(val) {
if (val === 0) {
return // 为0的时候不做改变
} else if (val === 1) {
// 为1的时候唤醒弹窗
…………
}
}
}
},
// 在这里用新定义的字段替换传来的字段
created() {
this.newOpenKey = this.openKey
},
methods: {
// 关闭弹窗事件
closeNewChannel() {
this.newOpenKey = 0 // 将值改回初始
this.$emit('closeNewChannel', this.newOpenKey) // emit事件通知父组件
// 格式： this.$emit('父组件的事件名', '要传的值')
…………
},
…………
}