创建公共的子组件vue页面 unfold.vue
<template>
<div>
<div v-on:click="changeFoldState()" style="margin-left: 89%;margin-top: 1%">
<span style="color: #54a6de">{{brandFold?' 收起∧':' 展开∨ '}}</span>
</div>
</div>
</template>
<script>
export default {
data () {
return {
childUnfold: false
}
},
// 接受父组件的值
props: {
brandFold: Boolean,
required: true
},
methods: {
changeFoldState () {
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
this.$emit('childByValue', this.childUnfold)
}
},
watch:{
childUnfold(curVal,oldVal){
alert(curVal+"---"+oldVal);
this.brandFold = !this.brandFold;
}
}
}
</script>
<style scoped>
span{
width: 30px;
height: 17px;
border:1px solid rgba(0,0,0,0.1);
cursor:pointer;
}
</style>
父组件页面引用
引用与注册组件
定义属性
定义子组件触发附件的方法