1.新建一个子组件,在父组件中引入并使用,传入initNum为10给子组件
父组件中
引入: import clickCounter from ''
注册: components: {clickCounter}
使用: <clickCounter :initNum="10" @clicknum="handleClicknum">
使用solt插槽时写在这
</clickCounter>
2.子组件接收值
接收值
props: {// 父组件传过来的值的集合(父传子)
initNum: { // initNum为字段名
type: Number,// 字段类型
default: 0
}
}
放在data中使用
data () {
return {
num: this.initNum
}
},
子传父
1.子传父用$emit
this.$emit('clicknum', {// 父组件可以监听到这个方法(子传父)
num: this.num //传入的值
})
2.父监听接收
监听子组件传值的方法@clicknum
<clickCounter :initNum="10" @clicknum="handleClicknum">
</clickCounter>
methods: {
handleClicknum (data) {
console.log(data.num)
}
}
全部代码
index父组件:
<template>
<div class="container">
<clickCounter :initNum="10" @clicknum="handleClicknum">
<input type="checkbox" /> 禁用
</clickCounter>
</div>
</template>
<script>
import clickCounter from '@/components/click-counter'
export default {
data () {
return {
}
},
components: {clickCounter},
methods: {
handleClicknum (data) {
console.log(data.num)
}
}
}
</script>
<style scoped>
</style>
2.子组件click-counter.vue
<template>
<div class="click-counter">
<div class="counter-num">次数:{{num}}</div>
<button class="counter-btn" @click="handleClick">点我呀!</button>
<button class="counter-reset-btn" @click="handleResetClick">清零</button>
<slot></slot><!-- 使用插槽,子组件挖了个坑,父组件去填(填入的是界面) -->
</div>
</template>
<script>
export default {
props: {// 父组件传过来的值的集合(父传子)
initNum: {
type: Number,
default: 0
}
},
data () {
return {
num: this.initNum
}
},
methods: {
handleClick () {
this.num += 1
this.$emit('clicknum', {// 父组件可以监听到这个方法(子传父)
num: this.num
})
},
handleResetClick () {
this.num = 0
}
}
}
</script>
<style>
.click-counter {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
background-color: #ffffff;
padding: 10px;
}
.counter-num,
.counter-btn,
.counter-reset-btn {
flex: 1;
margin: 3px;
}
</style>
插槽:另外slot插槽是在子组件中插入的位置中写slot标签,然后在父组件的子组件里面插入界面