父组件向子组件传参
父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。
父组件
<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>
子组件
<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>
父组件主动获取所有的参数和方法（子组件被动传参）
父组件
<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>
子组件
<template>
<div v-if="visible">
....
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
},
},
methods: {
showPhone() {
this.visible = true
},
},
};
</script>
子组件（主动）向父组件传参
方式一
子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。
父组件
<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>
子组件
<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>
子组件向父组件传参 $emit
父组件
<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>
子组件
<template>
<button @clcik="onClick">点击传递向父组件传参</button>
</template>
<script>
export default {
name: '',
data() {
return {
dataValue: 123
};
},
methods: {
onClick() {
// 第一个参数为父组件绑定在子组件上的自定义事件，第二个参数为传递的参数
this.$emit('delete', dataValue)
}
}
};
</script>