The parent component passes parameters to the child component
The parent component is directly bound to the label of the child component, and the child component receives the passed parameters through props.
Parent component
<template>
<i-activities-item
:content="content"
/>
</template>
<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
name: 'NewsCenterListPaging',
components: {
'i-activities-item': ActivityItem,
},
data() {
return {
content: 'text',
};
},
};
</script>
Subassembly
<template>
<div>{
{
content }}</div>
</template>
<script>
export default {
name: '',
props: {
content: {
// 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
type: String,
// 定义是否必须传
required: true,
// 定义默认值
default: '暂无'
},
},
data() {
return {
};
},
};
</script>
The parent component actively obtains all parameters and methods (passively passed parameters by the child component)
Parent component
<template>
<i-bind-phone ref="phoneRef" :phone="phone" />
</template>
<script>
import PhonePopup from '@/views/personal-center/system-setting/componets/bind-phone';
export default {
components: {
'i-bind-phone': PhonePopup,
},
data() {
return {
phone: null,
},
},
methods: {
// 点击查看手机绑定
onClickChangePhone() {
// 父组件调用子组件中的showPhone方法
this.$refs.phoneRef.showPhone();
console.log(this.$refs.phoneRef.visible)
},
},
};
</script>
Subassembly
<template>
<div v-if="visible">
....
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
},
},
methods: {
showPhone() {
this.visible = true
},
},
};
</script>
The child component (actively) passes parameters to the parent component.
Method 1: The
child component receives a method passed from the parent component, and uses the parameters to be passed to the parent component as the parameters of the method.
Parent component
<template>
<i-activities-item
:content="content"
:callback="onCallback"
/>
</template>
<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
name: 'NewsCenterListPaging',
components: {
'i-activities-item': ActivityItem,
},
data() {
return {
content: 'text',
childValue: ''
};
},
methods: {
// childrenData就是子组件传递过来的参数
onCallback(childrenData) {
console.log(childrenData)
this.childValue = childrenData
}
}
};
</script>
Subassembly
<template>
<div>{
{
content }}</div>
<button @clcik="onClick">点击传递向父组件传参</button>
</template>
<script>
export default {
name: '',
props: {
content: {
// 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
type: String,
// 定义是否必须传
required: true,
// 定义默认值
default: '暂无'
},
callback: {
type: Function
}
},
data() {
return {
dataValue: 123
};
},
methods: {
onClick() {
this.callback(dataValue)
}
}
};
</script>
The child component passes the parameter $emit to the parent component
Parent component
<template>
<i-activities-item @delete="onDeleteItem" />
</template>
<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
name: 'NewsCenterListPaging',
components: {
'i-activities-item': ActivityItem,
},
data() {
return {
content: 'text',
childValue: ''
};
},
methods: {
// 当子组件触发delete事件时，父组件的该函数就会执行
onDeleteItem(childrenData) {
console.log(childrenData) // 123
}
}
};
</script>
Subassembly
<template>
<button @clcik="onClick">点击传递向父组件传参</button>
</template>
<script>
export default {
name: '',
data() {
return {
dataValue: 123
};
},
methods: {
onClick() {
// 第一个参数为父组件绑定在子组件上的自定义事件，第二个参数为传递的参数
this.$emit('delete', dataValue)
}
}
};
</script>