前言
1.子组件调用父组件的方法
1.在父组件中给引用的子组件注册一个事件(事件的名称自定义)
2. 子组件可以触发这个事件$emit(‘事件名字’)
2.子组件给父组件传递数据
1. e m i t 方法第二个参数可以定义子组件给父组件传递的内容 2. 在父组件中获取到子组件中的内容( 1 )父组件没有自定参数,在父组件的方法直接加这个参数就可以拿到( 2 )父组件有自定义参数,传入 emit方法第二个参数可以定义子组件给父组件传递的内容 2. 在父组件中获取到子组件中的内容 (1)父组件没有自定参数,在父组件的方法直接加这个参数就可以拿到 (2)父组件有自定义参数,传入 emit方法第二个参数可以定义子组件给父组件传递的内容2.在父组件中获取到子组件中的内容(1)父组件没有自定参数,在父组件的方法直接加这个参数就可以拿到(2)父组件有自定义参数,传入event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。
代码
子组件向父组件传参过程中有两个参数:第一个参数是自定义的名字;第二个参数是传递的数据。
<body>
<div id='app'>
<father></father>
</div>
<template id="father">
<div>
<child :type="type1" @toparent="toparent(1,$event)"></child>
</div>
</template>
<template id="child">
<div>
child
<button @click="toP">点击</button>
</div>
</template>
<script>
Vue.component('father', {
template: '#father',
data() {
return {
type1: 'free'
}
},
methods: {
// 接收来自子组件的传值
toparent(data, data2) {
console.log(data); // 1
console.log(data2); // {name: 'zs', age: 18}
}
}
})
Vue.component('child', {
template: '#child',
data() {
return {
}
},
// 父传子
props: {
type: {
type: [String, Number],
default: () => {
return 'free'
}
}
},
methods: {
// 子传父
toP() {
// 第一个参数:自定义的名字
//第二个参数:传递的数据
this.$emit('toparent', { name: 'zs', age: 18 })
}
},
created() {
console.log(this.type); // free
}
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>