キーワード: props、$emit()、バインドされたデータとイベント
記事ディレクトリ
序文
`ヒント: ここでは、この記事に記録する一般的なコンテンツを追加できます。
プロジェクトでは、一般的に使用されるいくつかのパブリック コードが抽出され、サブコンポーネントとして記述されることがよくあります。また、1 ページ内のコードが多すぎる場合は、関連するコードを抽出して、さまざまな機能に応じてサブコンポーネントとして記述することができるため、コード構造がより簡潔かつ明確になり、その後のメンテナンスがより便利になります。このビットについて、プロジェクトで使用される例で説明します。
提示：以下是本篇文章正文内容，下面案例可供参考
1. 子コンポーネントを親コンポーネントに導入する
親子コンポーネント ページの表示:
親コンポーネントは、子コンポーネント関連のコードをインポートします。
例: pandas は、データ分析タスクを解決するために作成された NumPy ベースのツールです。
2.親コンポーネントから子コンポーネントに値を渡す方法
親コンポーネント: データ バインディングを通じて子コンポーネントにデータを渡す
//父组件
<device-dialog
:personInfo="info" //父组件通过赋值给info将表单数据传给子组件
:action="action" //判断是新增还是编辑 add、edit
:dialogText="dialogText" //对话框显示的标题
@toClose="dialogConfirm('cancel')" //关闭按钮对应的函数
@toComfirm="requestApi('getUser')" //确定按钮对应的函数
v-if="this.dialogFormNew" //控制对话框的显示与隐藏
></device-dialog>
this.info = this.form_user; //父组件中相关的值赋值给info
this.dialogText = '编辑设备信息';
this.dialogFormNew = true;
3. 子コンポーネントは親コンポーネントから渡された値をどのように受け取り、(props) を使用しますか
1. props を通じて親コンポーネントの渡された値を受け取る
<script>
export default {
name: 'personDetail',
props: {
personInfo: {
type: Object,
default: {
}
},
action: {
type: String,
default: {
}
},
dialogText: {
type: String,
default: {
}
}
}
}
</script>
2. 子コンポーネントの配列コンテナに props の値を代入し、親コンポーネントから渡されたデータを表示します
created() {
this.form_user = this.personInfo; //form_user是子组件对话框显示表单数据的数组
}
4. 子コンポーネントから親コンポーネントに値を渡す方法($emit)
サブコンポーネント: ここでは、2 つのクリック イベントは主に、サブコンポーネント ダイアログ ボックスをキャンセルして値を渡すことを確認するために使用されます。
</template>
</div>
<el-dialog>
<div
slot="footer"
class="dialog-footer"
>
<el-button @click="dialogConfirm('cancel')">取 消</el-button>
<el-button
type="primary"
@click="dialogConfirm('confirm')"
>
确 定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
dialogConfirm(res) {
if (this.action === 'edit') {
if (res === 'cancel') {
this.closeDialog();
} else {
this.$refs['userForm'].validate((valid) => {
//验证成功
if (valid) {
this.requestApi('edit'); //进入api新增请求
} else {
//验证失败
console.log('error submit!!');
return false;
}
});
}
}
},
closeDialog() {
this.$emit('toClose', false); //通过$emit将参数false传值给父组件toClose对应的函数
},
requestApi(action, verifyCB) {
switch (action) {
// 查看编辑
case 'edit':
this.$axios({
method: 'post',
url: '/office/roomDevice/updateLock?random=' + Math.random() * 10,
data: {
id: this.form_user.deviceId,
deviceName: this.form_user.deviceName,
deviceAddress: this.form_user.deviceAddress
},
headers: {
Authorization: 'Bearer ' + sessionStorage.getItem('token')
}
})
.then((res) => {
console.log('编辑_res:', res);
if (res.data.code === 0) {
this.tips(res.data.message, 'success');
this.comfirm();
} else {
this.tips(res.data.message, 'warning');
}
})
.catch((error) => {
console.error(error);
});
break;
},
comfirm() {
this.$emit('toComfirm'); //这里将相关的数据传回父组件
}
</script>
5、親コンポーネントは子コンポーネントから渡された値を使用します
以下のコードに示すように、closeData とconfirmData はそれぞれ、キャンセル時と確認時にサブコンポーネントによって渡された値を受け取ります。
要約する
1. 親コンポーネントと子コンポーネント間のパラメータの受け渡しがより一般的に使用されます。親コンポーネントが子コンポーネントにパラメータを渡すとき、子コンポーネントは props を使用してパラメータを受け取り、親コンポーネントは渡されるパラメータをバインドします。
2. 子コンポーネントが親コンポーネントにパラメータを渡す場合、$emit（親コンポーネントの関数、渡すパラメータ）を使用して親コンポーネントに数値を渡します。