OverVue.dev

# Components

# Import a component

This is how to register and import a component.

# Input Parent


 




 


 
 
 



<template>
  <div>
    <MyFirstComponent/>
  </div>
</template>

<script>
import MyFirstComponent from './components/MyFirstComponent.vue'

export default {
  components: {
    MyFirstComponent
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Input Child (MyFirstComponent.vue)
<template>
  <p>I like tigers.</p>
</template>
1
2
3
# Output

I like tigers

# Dynamically import components

Using :is="componentName" you can switch between components

# Input




 




 
 








 





<template>
  <div>
    <button @click="step = 'step01'">step01</button>
    <button @click="step = 'step02'">step02</button>
    <component :is="step"></component>
  </div>
</template>

<script>
import step01 from '~/components/step01.vue'
import step02 from '~/components/step02.vue'

export default {
  components: {
    step01,
    step02
  },
  data() {
    return {
      step: ''
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Output

# And keep the data alive

Using <keep-alive>, inactive components will be cached.

 

 

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>
1
2
3

# Passing data to Child

We are passing data, that is not bound.

# Input


 




 


 
 
 



<template>
  <div>
    <MyFirstComponent msg="I like tiger print"/>
  </div>
</template>

<script>
import MyFirstComponent from './components/MyFirstComponent.vue'

export default {
  components: {
    MyFirstComponent
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Output

I like tiger prints

# Passing bound data to Child

Now let's see how to pass bound data from parent to child component.

# Input Parent:






 







 





<template>
  <div>
    <p>Parent component - Name: {{ name }}</p>
    <button @click="name = 'Howard'">Change name</button>
    <button @click="name = 'Carole'">Reset</button>
    <MyChildA :someText="name"></MyChildA>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      name: 'Carole'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Input Child:



 





 


<template>
  <div class="child">
    <p>Child component - As prop from parent: {{ someText }}</p>
  </div>
</template>

<script>
export default {
  props: ['someText']
}
</script>
1
2
3
4
5
6
7
8
9
10

TIP

Props can be an array or an object ( in order to add some validation ) - See below

# Output:

Parent component - Name: Carole

Child component - As prop from parent: Carole

# Passing data to Parent

Now let's see how to pass data from Child to Parent component.

# Input Parent:




 







 





<template>
  <div>
    <p>Parent component - Name: {{ parentValue }}</p>
    <myChildB v-model="parentValue"></myChildB>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentValue: ''
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Input Child:






 
 







 
 
 
 
 



<template>
  <div class="child">
    <div>Child component</div>
    <input
      type="text"
      v-bind:value="value"
      @input="updateValue($event.target.value)"
      placeholder="Type name"
    />
  </div>
</template>

<script>
export default {
  methods: {
    updateValue: function(value) {
      this.$emit('input', value)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Output:

Parent component - Name:

Child component

# Sync data Parent/Child

To pass data parents to Child, you can sync the data. You cannot pass data from child to sibling component directly, without passing the data though an event bus or using Vuex

# Input Parent:



 
 







 





<template>
  <div>
    <p>First Name: {{ name }}</p>
    <MyChildSync :name.sync="name"></MyChildSync>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      name: 'Joe'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Input Child:




 





 
 
 
 
 
 
 

 
 
 
 




<template>
  <div class="child">
    <p>As prop from parent: {{ name }}</p>
    <button @click="resetName">Reset Name</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: 'JohnDoe'
    }
  },
  methods: {
    resetName() {
      var newName = 'Joseph'
      this.$emit('update:name', newName)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Output:

First Name: Joe

As prop from parent: Joe

# See the official Vue.js doc

← Slots →