Vue.js Vuejs-选中复选框时显示/隐藏块，复选框为组件时

当复选框被选中或取消选中时，我需要显示或隐藏块。复选框是布局中包含的组件。选项必须在布局中显示或隐藏的内容。例如：

布局页面：

<template lang="pug">

  div
    checkbox(caption="test")
    div(v-if="showExtend")
      p lorem ipsum

</template>

<script>
  data() {
    return: {
      showExtend: false
    }
  }
</script>

div
复选框（标题=“测试”）
div（v-if=“showExtend”）
同侧穹窿
数据（）{
返回：{
showExtend:错误
}
}

复选框组件：

<template lang="pug">
  label
     input(type="checkbox", :name="name", :checked="checked")
     span(v-html="caption")

</template>

<script>
  props: {
        caption: {
            type: String
        },
        name: {
            type: String,
            required: true
        },
        checked: {
            type: Boolean
        }
    }
</script>

标签
输入（type=“checkbox”，：name=“name”，：checked=“checked”）
span（v-html=“caption”）
道具：{
标题：{
类型：字符串
},
姓名：{
类型：字符串，
必填项：true
},
检查：{
类型：布尔型
}
}

您在checkbox组件输入元素中缺少

@change

事件，在您的示例中，您具有单向绑定。请参见：，自定义v型：

复选框组件：

<template lang="pug">
  label
     input(type="checkbox", :name="name", :checked="checked")
     span(v-html="caption")

</template>

<script>
  props: {
        caption: {
            type: String
        },
        name: {
            type: String,
            required: true
        },
        checked: {
            type: Boolean
        }
    }
</script>

标签
输入（type=“checkbox”，：name=“name”，：checked=“value”，@change=“$emit（'input'，$event.target.checked）”）
span（v-html=“caption”）
道具：[“标题”、“名称”、“值”]

布局：

div
复选框（caption=“test”，v-model=“showExtend”）
div（v-if=“showExtend”）
同侧穹窿
数据（）{
返回：{
showExtend:错误
}
}

您可以测试它：

newvue（{el:'#layout'，数据：{showExtend:false}}）

组件（'checkbox'，{template:'#checkbox'，props:[“caption”，“name”，“value”]}）
乱数假文

当我选中并取消选中复选框时，showExtend不返回falsecheckbox值表示always onFixed。它必须是：

@change=“$emit（'input'，$event.target.checked）”