supermike
253
3
Vue

can not pass data from root to first child component

Posted 1 year ago by supermike

can not pass data from root to first child component. here is main.js

import Vue from 'vue'
import app from './app.vue'

window.fscapital = new Vue({
    el: '#fscapital-root',
    render: h => h(app),
    template: '',
    methods: {
        appInit: function(config) {
            // Object.keys(config).forEach((key)=> {
            //     Vue.set(window.fscapital.config, `${key}`, config[key]);
            // });
            this.$data.config = config;
        }
    },
    data: {
        config: {
            userModel: undefined,
            randomUsersList: undefined,
            tops: undefined
        }
    }


});

app.vue

<template :config="config">
    <div id="fscapital">
        <header_menu :user-model="userModel"></header_menu>
        <div class="main">
            <city></city>
            <div class="tops">
                <city_top></city_top>
                <people_top></people_top>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss" rel="stylesheet/less" src="./app.scss"></style>
<script>
    import header_menu from './components/header_menu/header_menu.vue';
    import city from './components/city/city.vue';
    import city_top from './components/tops/city_top.vue';
    import people_top from './components/tops/people_top.vue';
    export default {
        name: 'fscapital-harem',
        components: {header_menu, city, city_top, people_top},
        props: ['config'],
        data: function() {
            return {
                userModel: {}
            }
        },
        mounted: function(){

        }
    }
</script>

when i call appInit from window context to add any external data to app(pass simple json) i successfully update data in root component, but data does not go to child component , <template :config="config"> does not set prop. i can get config in app.vue by

data: function() {
            return {
                userModel: this.$parent.config
            }
        },

but it is not reactive. not root component successfully give data and have props, but root does not. what can i do with this?

Please sign in or create an account to participate in this conversation.