Pass Props component to root Instance
I\'m super newbie in vuejs. I don\'t know how to pass props component to root instance Here is my code.
component (Tesvue.vue)
<
-
A component can not directly pass data back to its parent. This is only possible via events. So for this to work you'd have to emit an event from the child component as soon as its ready and have to listen for that event. In your case its like this:
Component (Tesvue.vue)
<template> <label class="col-md-2 control-label">{{name}}</label> </template> <script> export default { props: ['name'], mounted() { this.$emit('setname', this.name); } } </script>Root (app.js)
window.Vue = require('vue'); import tesvue from './components/Tesvue.vue'; var vm = new Vue({ el: '#app', components: { tesvue }, data: { getname: '' } methods: { changeName(name) { this.getname = name; } } });blade file
<div class="" id="app"> <tesvue name="{{$model->name}}" @setname="changeName"></tesvue> <!-- getname got set through changeName event --> <span v-text="getname"></span> </div>讨论(0) -
Here's nice solution using dataset:
HTML:
<div id="app" data-name="dataname">Component (Testvue.vue):
<template> <label class="col-md-2 control-label">{{name}}</label> </template>Root Instance (App.js)
const root_element = document.getElementById('app'); new Vue({ el: root_element, propsData: { name: root_element.dataset.name } });See more about propsData in the docs.
If you want to use multiple dataset at once, you can assign an object using spread operator like this: (if you're using Babel and have the object-rest-spread plugin)
const root_element = document.getElementById('app'); new Vue({ el: root_element, propsData: { ...root_element.dataset } });Or, simply use ES6 method if you have not used Babel: (Object.assign())
propsData: Object.assign({},root_element.dataset)So, if you have defined multiple dataset in your html like this:
<div id="app" data-name="dataname" data-another="anotherdata" data-anything-else="anydata">You can expose props like this:
export default { // ... props: ['name', 'another', 'anythingElse'], // ... };讨论(0) -
There are some ways to pass data from child to the parent.The best and acceptable are using Vuex Store and emit an event.
If you want to emit an event from child you can call a method to do that:
callThisMethod () { this.$emit('nameOfEventYouWantToListen', dataToPass) }Then you can listen to this event in parent component in which you have import the component
<ImportedComponent @nameOfEventYouWantToListen="callFunctionInParentHere" />Alternatively if you want to use Vuex then go and create a property in state of store,also a getter to get that property from state and a mutation to change the value of property located in state.
Then in parent component use a getter to get the property in state and in child component commit a mutation (would be great if you include actions in whole proccess tho) to change the property in state.
讨论(0) -
I found the solution
<template> <label class="col-md-2 control-label">{{name}}</label> </template> <script> export default { props: ['name'], mounted: function() { this.$root.getname = this.name; } } </script>check this out https://jsfiddle.net/mtL99x5t/
but many thanks for @Reduxxx for answer my newbie question.
讨论(0)
加载中...
- 热议问题