[Vuejs]-Vuej.s: How pass variable to component attribute

0👍

You can use the $parent property:

<template>
  <div>
    App
    <input type="text" v-model="propTest">
    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child.vue';

export default {
  name: 'App',
  components: { Child },
  data: () => ({
    propTest: 'abc',
  }),
};
</script>

<template>
  <div>
    child
    <button @click="test">Test</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    test() {
      console.log(this.$parent.propTest);
    },
  },
};
</script>

Be careful with this property, you must use in edge cases: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance

Leave a comment