Vue--How can the child component use some of parent component's data directly?

CodeFreshman 0
Viewed 41

I'm learning Vue.js. Here I want to design a checkbox component like this:

    <xxx-checkbox-group>
        <xxx-checkbox></xx-checkbox>
        <xxx-checkbox></xx-checkbox>
    </xxx-checkbox-group>

Above are two kinds, the parent checkbox-group and the child checkbox. The checkbox-group use <slot> to get the children component and have some necessary data. I want the child can use some parent's data(just use not change). It's a bit troublesome and inefficient if I put a attribute in every child's tag.

    <xxx-checkbox-group>
        <xxx-checkbox shape="square"></xx-checkbox>
        <xxx-checkbox shape="square"></xx-checkbox>
    </xxx-checkbox-group>

Can I pass the value by other ways? So that I can controll all the children's state through the parent. I think it's possible but I can't find the way to achieve that.

    <xxx-checkbox-group shape="square">
        <xxx-checkbox></xx-checkbox>
        <xxx-checkbox></xx-checkbox>
    </xxx-checkbox-group>
vue.js javascript
1 Answers

For me it's not fully clear what's your intention, so can you create a small jsfiddle example?

but in general, within a child component you can access to it's parent vue instance via this.$parent to read & change properties.

wendt880
Related