1. 子コンポーネントが親コンポーネントのメソッドを呼び出します（親子メソッド）
シナリオ: 子コンポーネントはポップオーバー コンポーネントです。「OK」をクリックすると、親コンポーネントのリストに新しい値が追加されます。親コンポーネントの getLIst() メソッドを呼び出す必要があります。
コード：
//父组件 利用@子组件方法名="父组件方法名"，实现父传子-方法
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
@getList="getList"></add-follow-record>
/** 查询列表 */
getList() {
incrementDetail(this.incrementId).then(response => {
this.incrementIdData = response.data;
})
},
//子组件 调用新增接口时，利用this.$emit('方法名')方法，来调用父组件的方法
/** 新增对话框 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (!valid) {
return;
}
this.$set(this.form, 'incrementId', this.incrementId)
// 添加的提交
incrementFollowCreate(this.form).then(res => {
if (res.data !== null) {
this.$modal.msgSuccess('已添加一条跟进记录!');
this.$emit('toggleDialog')
this.reset();
//调用父组件获取列表接口方法
this.$emit('getList')
}
})
});
},次に、子コンポーネントが親コンポーネントの値を呼び出します (parent-child-value)。
シナリオ: シナリオは上記のとおりです。親コンポーネントで [追加] をクリックしたときに、子コンポーネントに open を渡す必要がありますが、子コンポーネントは親コンポーネントの値を直接変更できないため、props を使用して渡す必要があります。
コード：
//父组件 利用：子组件定义的值='父组件值'，实现父传子-值
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
@getList="getList"></add-follow-record>
data(){
// 是否显示弹出层
open: false,
}
//子组件 子组件通过props接收父组件传递过来的值
<el-dialog title="" :visible.sync="open" width="35%"></el-dialog>
//props有两种写法
//法一：
props:['open']
//法二：
props: {
open: {
type: String,//数据类型
required: true//默认值
},
}3. 親コンポーネントが子コンポーネントのメソッド/値を呼び出します (子は親のメソッド/値を渡します)。
シナリオ: シナリオは上記のとおりです (1) [追加] をクリックすると、すでに値が入力されていますが、[OK] をクリックしないと、[キャンセル] をクリックした後も入力ボックスに値が残ります。 「追加」をクリックすると、入力ボックスの値がクリアされます。
(2) 親コンポーネントは子コンポーネントの特定の値を取得して使用したい。
コード：
//父组件 父组件中添加ref属性，这样就可以获取子组件的dom的方法或值
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
@getList="getList"></add-follow-record>
/** 打开对话框 */
addFollowRecord() {
this.open = true;
//利用this.$refs.ref名称.子组件方法名可以调用子组件的方法（子传父-方法）
this.$refs.followRecord.reset()
//利用this.$refs.ref名称.子组件值可以将子组件的值赋值给父组件（子传父-值）
this.msg = this.$refs.followRecord.message
},
//子组件
data(){
message:'子组件数据'
}
/** 表单重置 */
reset() {
this.form = {
...
};
this.resetForm("form");
},