CODEWITHSUNDEEP
javascriptvue.js
chucklai
chucklai

Reputation: 844

How to pass values between parent and child components in vue?

I defined two different components:

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

in main template they are organized like this:

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

Now I want to pass values from permissionItem to permissionTitle and vice versa. How to can I do this?

In permissionTitle.vue:

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

In permissionItem.vue:

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

Upvotes: 0

Views: 55

Answers (1)

Jim B.
Jim B.

Reputation: 4714

You can do this with v-model.

Add a model and prop to your child component, something like this:

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;
    ....

And instantiate it like this:

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

variables 'valueN' are now available in your parent component.

Vue's documentation on this topic is a little lacking, but its basically here: https://v2.vuejs.org/v2/guide/components-custom-events.html

Upvotes: 2

Related Questions