How call a method from an other component-CodePudding

I have made an example in Codesandbox

Is there a way to collapse the sidebar by clicking on the button 'Col-2'. The button 'Col-1' is working fine, but it's necessary that is works by clicking on 'Col-2'.

I've tried to call the collapsedButton but this didn't work.

<script>
    export default {
        name: 'template',
        methods: {
            setCollapsed () {
                this.collapsed = !this.collapsed
            },
             collapseButton () {
                this.$emit('setCollapsed')
                this.collapsed = !this.collapsed
            }
        }
    }
</script>

Can someone help me out with this?

CodePudding user response：

You should make collapsed a prop and control it from the parent component. You'll need to listen for the event (this.$emit('setCollapsed')) in the parent component and update collapsed accordingly.

I hope this helps, good luck!

CodePudding user response：

Since you're using Vue 2, you could use a mixin.

Working demo: https://codesandbox.io/s/vue-forked-tz1yox?file=/src/components/sidebar.vue

In more detail, the mixin uses a reactive object which serves as one-source-of-truth for the sidebar's collapsed state and also exposes a writable computed (collapsed) and a toggle method.

Using the mixin in any component is the equivalent of writing the writable computed and the method into the component.