父组件传值子组件
- 只需要记住一句话:父组件的字标签给子组件传值
- 子组件的props属性用来可以接受父组件的传值然后给传来的值设置数据类型
- props与data、methods平级
props: {
//自定义参数
type: String,
// 定义多种类型
size: [Number, String],
pageNum: [String, Number],
},
子组件传值父组件
子组件调用父组件:
在父组件中给引用的子组件注册一个事件
子组件给父组件传递数据:
子组件中$emit方法第二个参数可以定义子组件给父组件传递的内容
父组件如何获取内容呢:
在父组件的方法中获取
<template id="father">
<div>
我是父组件
<son @toBa="toba($event,2)"></son> <!-- 1.在父组件中给引用的子组件注册一个事件(这个事件的名字是自定义的) -->
</div>
</template>
<template id="son">
<div>
<button @click="toba">子传父</button>
我是子组件
</div>
</template>
Vue.component('father', {
template: '#father',
methods: {
toba(data, params) {
console.log(data,params);
console.log(params);
console.log(event);
}
}
})
Vue.component('son', {
template: '#son',
methods: {
toba() {
//2. 子组件可以触发这个事件$emit('事件名字')
// 第一个参数:自定义事件名 第二个参数:要传递的参数
this.$emit('toba', { name: 'cxy' },1)
}
}
})