javascript - vue中父子组件如何传值？

Question

我定义了两个不同的组件:

'permissionTitle':customTitle,
'permissionItem':customItem,

在主模板中，它们的组织方式如下:

    <permissionTitle content="品牌商管理">
        <permissionItem>查看列表</permissionItem>
        <permissionItem>添加</permissionItem>
        <permissionItem>修改</permissionItem>
        <permissionItem>删除</permissionItem>
    </permissionTitle>

现在我想将值从permissionItem传递到permissionTitle，反之亦然。我怎样才能做到这一点？

在permissionTitle.vue中:

<template>
    <div id="root">
        <Checkbox>
            <span>{{content}}</span>
        </Checkbox>
        <slot></slot>
    </div>
</template>

在permissionItem.vue中:

<template>
    <Checkbox @on-change="change">
        <slot></slot>
    </Checkbox>
</template>

Answer 1

您可以使用 v-model 来做到这一点。

向您的子组件添加模型和 Prop ，如下所示:

Vue.component('permissionItem', {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: String
    },
    methods: {
        // or however this value changes in your component
        changeValue(newValue) { 
            this.value = value;
            $emit('change', this.value;
    ....

并像这样实例化它:

<permissionTitle content="品牌商管理">
    <permissionItem :v-model="value1">查看列表</permissionItem>
    <permissionItem :v-model="value2">添加</permissionItem>
    <permissionItem :v-model="value3">修改</permissionItem>
    <permissionItem :v-model="value4">删除</permissionItem>
</permissionTitle>

变量“valueN”现在在您的父组件中可用。

Vue 关于这个主题的文档有点缺乏，但基本上在这里:https://v2.vuejs.org/v2/guide/components-custom-events.html