vue中如何在父子組件之間傳遞值？

Question

我定義了兩個不同的組件：

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

在主模板中，它們的組織方式如下：

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

現在我想將值從permissionItem 傳遞給permissionTitle，反之亦然。 我該怎么做？

在權限Title.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 做到這一點。

將模型和道具添加到您的子組件，如下所示：

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