Vue.js
Single File Component
//Hello.vue
<template>
<p>{{ greeting }} Vue.js friends! </p>
</template>
<script>
module.exports ={
name:'hello',
data(){
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size:2em;
text-align: center;
}
</style>
//MyComponent.vue
<template>
<div>
<p>{{ greeting }} Vue.js friends!</p>
<other-component />
</div>
</template>
<script>
import OtherComponent from "./OtherComponent.vue";
module.exports = {
name: "myComponent",
data() {
return {
greeting: "Hello",
};
},
components: {
OtherComponent,
},
};
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4464454/props-events.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/5492555/vue_data_and_props.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/6686769/Screen_Shot_2019-10-22_at_21.57.15.png)
export default { //child component
props: {
todos: { type: Array }
},
methods: {
deleteTodo(todo) {
this.$emit("deleteTodo", todo);
}
}
};
<template>
<todos-list :todos="itemsFiltered" @deleteTodo="deleteTodo"/>
</template>
<script>
import TodosActions from "./components/TodosActions";
export default { //parent component
components: {
TodosActions
},
data() {
return {
todos: []
};
},
methods: {
deleteTodo(todo) {
if (confirm("deleting ..." + todo.title))
this.todos.splice(this.todos.indexOf(todo), 1);
}
}
</script>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/6686779/Screen_Shot_2019-10-22_at_21.59.56.png)