Question

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

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

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

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

现在，我想将值从permissionItem传递到PermissionTitle，反之亦然。我该怎么办？

在PermissionsTitle.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模型进行此操作。

向您的子组件添加模型和道具，如下所示：

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://vuejs.org/v2/guide/components-custom-events.html

如何在vue中的父组件和子组件之间传递值？

1 个答案: