时间戳

首页 > 解决方案 > vue中如何在父子组件之间传递值？

javascript - vue中如何在父子组件之间传递值？

问题描述

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

'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>

标签： javascriptvue.js

解决方案

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

推荐阅读