<script>// @ is an alias to /src (in a vue-cli generated project)import Child from '@/components/Child.vue'// You also need to declare that the imported child component will be used:
export default {
components: {
Child
}
}
</script>/****************************************************************/<template><div><!-- simplest prop - pass a string--><Child title="This is my title"></Child><!-- Pass an object, defined inline --><Child :parentData="{msg: 'xxx'}"></Child><!-- Pass an object, defined in the `data()` method --><Child :parentData="myData"></Child><!-- Pass a string variable, defined in `data()`. Note colon.--><Child :stringProp="stringMessage"></Child></div></template>/****************************************************************/<script>
export default {
name: 'Child',
// To use props, they must be declared
props: {
parentData: Object,
stringProp: String,
title: String
}
}
</script>/****************************************************************/<!-- Parent.vue --><template><div><!--
Listen for `childToParent`: the first parameter of the `$emit` method
in the child component. We're also listening and reacting to an
`increment` event - in thiscase, we increment a counter inline.--><Child :parentData="myData" v-on:childToParent="onChildClick" v-on:increment="counter++"></PassProps></div></template><script>import Child from '@/components/Child.vue'
export default {
data () {
return {
counter: 0,
fromChild: '', // This value is set to the value emitted by the child
}
},
name: 'about',
components: {
Child
},
methods: {
// Triggered when `childToParent` event is emitted by the child.
onChildClick (value) {
this.fromChild = value
}
}
}
</script>/****************************************************************/<!-- Child.vue --><template><div class="child"><!-- Simplest - call `$emit()` inline--><button type="button" name="button" v-on:click="$emit('increment')">Click me to increment!</button><!-- set a variable then trigger a method which calls `$emit()` --><label for="child-input">Child input: </label><input id="child-input" type="text" name="msg" v-model="childMessage" v-on:keyup="emitToParent"></div></template><script>
export default {
data() {
return {
childMessage: ''
}
},
name: 'Child',
methods: {
// Define the method that emits data to the parent as the first parameter to `$emit()`.// This is referenced in the <template> call in the parent. The second parameter is the payload.
emitToParent (event) {
this.$emit('childToParent', this.childMessage)
}
}
}
</script>
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems
resetting your password contact us
Check Your Email and Click on the link sent to your email