LINUX.ORG.RU

vue js, передать параметр в компонент.

 


0

2

суть вопроса, для сборки проекта использую webpack+vue-loader

проект выглядит так, main.js

import Vue from 'vue'
import App from './App.vue'
var app = new Vue({
  el: '#vue_test_id',
  data: {
        test:'ffff',
        test1:'dddd'
        },
  render: h => h(App)
})
файл App.vue
<template v-bind:test="test">
<div>
{{test}}
{{test1}}
</div>
</template>

<script>
export default {
  name: 'component1',
  props:['test'],
  data: function(){
    return {
        test1: this.$parent.test1
        }
    },
}
</script>

суть в том, что мне надо передавать состояние приложения во все компоненты вниз к «детям» и изменять его, в документации написано что можно передавать параметры детям через props, но как-то не работает, либо в случае когда каждый компонент отдельный файл надо делать это как-то по другому либо одно из двух. зато инициализация компонента через this.$parent прекрасно работает и реагирует не изменения.

Вообщем я вроде добился цели, но при помощи гугла, а не при помощи документации, и не совсем понимаю, зачем эти props, если всегда можно обратиться к this.$parent.

Правильно ли таким образом передавать параметры вниз, какие подводные камни.

А вот передать параметры из App.vue в его дочерние компоненты при помощи props уже получается.


Во-первых, если нужно передавать глобальное состояние на большую глубину, то следует использовать менеджеры состояний (Vuex и подобное).

Во-вторых. Не используй $parent для изменения данных.

Параметры в дочерние компоненты следует передавать так:

// App.vue
<template>
    <component :prop="param1"></component>
    <component :prop="param2"></component>
</template>

<script>
import Component from './Component.vue'
export default {
        name: "app",
        data: () => ({
            param1: 'Text ASD',
            param2: 'Text DSA',
        }),
        components: {
            Component
        }
}
</script>


// Component.vue
<template>
    <div>{{ prop }}</div>      <!-- здесь будет выведено содержимое переменной prop -->
</template>

<script>
export default {
        name: "component",
        props: ['prop']
}
</script>

shtain
()
Ответ на: комментарий от shtain

Как из одного vue компонента передать свойтсва в другой, я понял. Последний мой абзац говорит об этом. Я хочу понять как его передать в App.vue из main.js в котором делается.

window.app = new Vue({
  el: '#vue_test_id',
  data: {
        test:'ffff',
        test1:'dddd'
        },
  render: h => h(App)
})

app.test='ggg'
app.test='ttt'
короче, хочу из js кода менять данные внутри vue приложения

p.s. почему $parent плохо?

swelf
() автор топика
Последнее исправление: swelf (всего исправлений: 1)
Ответ на: комментарий от menangen

Вобщем чтобы сделать данные общими. 1)Использовать this.$root/this.$parrent 2)использовать Vuex Передавать как props не получается, не знаю как передать props из корня приложения в корневой компонент, да и не очень удобно тащить куда-то через props значения, а для их изменения обратно тащить события.

Чем плох вариант использования $root/$parent? они вроде бы решают проблему сделать данные общими, и я не вижу причин накручивать vuex.

UPD: вроде нашел способ

const data = {test:{name:'alala'}}

Vue.mixin({
    data: function() {
        return data
    }
})

в итоге во все компоненты в данные добавляется ссылка на объект {name:'alala'} при изменении

data.test.name='gggggggg'

соответственно «меняется» оно везде.

swelf
() автор топика
Ответ на: комментарий от swelf

А чем тебя не устроила общая шина данных? В офф доках по моей ссылке:

sourceOfTruth = { state: {} }
, и потом импортировать её в нужные тебе компоненты, и в локальный скоп через
data() { state: sourceOfTruth.state }
?

menangen ★★★★★
()
Ответ на: комментарий от menangen

Так я же это и сделал, только импортировал ее с помощью mixin. ты знаешь способ сделать это без mixin? ну так в этом и был мой изначальный вопрос, у меня не получалось. да и зачем, если с mixin вполне удобно.

p.s. в каком месте надо объявить

sourceOfTruth = { state: {} }
чтобы во всех компонентах просто писать
data() { state: sourceOfTruth.state }

swelf
() автор топика
Ответ на: комментарий от swelf

Сделал ты всё не правильно, а грязным хаком, который потом аукнется проблемами.

Глянь и переделай по человечески, туториал:
http://vuetips.com/simple-state-management-vue-stash

https://github.com/cklmercer/vue-stash/blob/master/README.md

P.S. Я сам терпеть не могу redux/vuex. Vuex еще не самое г в мире state management, по сравнению с redux.

Ещё есть событийная шина: https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-s...

menangen ★★★★★
()
Последнее исправление: menangen (всего исправлений: 1)
Ответ на: комментарий от menangen

Непонял что не правильно, если это общая шина из доков?

К каким проблемам может это привести?

swelf
() автор топика
Ответ на: комментарий от swelf

То, что ты написал - это не общая шина, а глобальный миксин. Общая шина - это отдельный экземпляр vue, расшаренный между компонентами, через который идёт прослушивание событий.

Приведет к засиранию «локального скопа», который должна возвращать data() в локальных компонентах.

menangen ★★★★★
()
Ответ на: комментарий от menangen

Не знаю как redux, но vuex это адище со своими строками.

ritsufag ★★★★★
()
Ответ на: комментарий от menangen

А разве то что я сделал не называется

Простой контейнер состояния с нуля

на странице документации

разве что добавил я его везде миксином. А как еще сделать, $root/$parent использовать нехорошо, почему я тож не понял. в тоже время как прокинуть «внешнюю» переменную из родительского скрипта main.js в компоненты *.vue без миксина, тож никто не подсказал.

swelf
() автор топика
Ответ на: комментарий от menangen

Это видел, не понял чем это принципиально отличается от доступа по this.$root.

Может проект у меня слишком простой, чтобы оценить все это разделение ради разделения.

swelf
() автор топика
Ответ на: комментарий от swelf

Может и простой, но лучше приучать себя делать нормально с разделением/вынесением store в отдельный файл и подключением его в каждый компонент, в его локальный data {}.

menangen ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.