Passing data to Components is overly complicated - in common, simple examples

[FEA5T]

Setup

Vue.component('bars', {
    template: '#bars-template', // is this even necessary? just pickup all "x/template" 's automatically and infer the name from the id?
})

<script type="x/template" id="bars-template">
    <svg>
        <g v-for="pt in pts">
            <rect x="{{pt.x}}" y="{{pt.y}}" width="{{z}}" height="{{z}}"></rect>
        </g>
    </svg>
</script>

Instance

var d = {
    pts: [{x: 1, y:2}, {x: 3, y:4}],
    z: 2
}

var v = new Vue({
    el: "#graph", // this should pass the data into all child templates automatically
    data: d
})

Why do I have to pass data down in my html elem? Why doesn't it have access to the Vue instance that it is a child of like normal html would?

<div id="graph">
    <bars :pts="pts"></bars>
</div>

So that I can do this:

<div id="graph">
    <bars></bars>
</div>

[yyx990803]

Let's say parent components pass all its data implicitly into all children. Now all your child components implicitly make use of these parent scope variables. Later on:

1. You look at a deeply nested child component. It uses this mysterious property which you have no idea where it is inherited from in the parent chain. And because there are no hints in the template (where the actual composition happens), you have to check the implementation details of every component in the chain to figure out which one of them introduced this property into the scope.
2. You want to extract out a child component out for reuse, but it makes use of inherited properties which makes it tightly coupled to its parent components. It's so much work to refactor everything to make it reusable so you just give up.

Because <bar> is a component, it may get used in different context, by different parents. The explicit data passing makes the individual component decoupled from its usage context, makes it easier to reason about and maintain, and makes the component reusable if necessary.

[FEA5T]

First of all - thank you for the response.

_Regarding #1 -_ closures could be applied here as well to grab the closest vue instance. _Yes,_ check the component chain. Brilliant.

Then you could reference the properties of the vue instance directly. In my example above: pts and z.

_Regarding #2 -_ Child component is expecting x, y, and z, it is tightly coupled to a source of this structure anyways, regardless of how the data got there or what it is named...therefore:

Explicit data passing is only required when part of parent collections are named differently but have the same internal structure (x, y, z) - an unusual design. And in this scenario, you could still pass data explicitly. Win-win.

I would also like to note that I was forced to abandon templates and inject templates with jquery because _I actually just could not get it to work due to syntax._

I wanted to pass the entire 'd' object into my template ...just couldn't figure it out from the documentation.

_Would be awesome if this worked:_

<bars :d="d"></bars>

_Or even better:_ http://es6-features.org/#PropertyShorthand

<bars :d></bars>

[nirazul]

Vue.js is a sophisticated framework that uses established principles from other established libraries and framework. It's unlikely (and undesirable!) that it's throwing away its core principles due to your argumentation, so I don't really know what you're aiming for.

Why don't you provide a jsfiddle, so we can try to help you in your specific use case that didn't work out for you? :)

[FEA5T]

Sure.

https://jsfiddle.net/2rv60f4q/

[yyx990803]

Here are a few things that needed to be fixed:

1. You are passing d directly to the instance as root data. Instead you should be passing it in as data: { d: d };
2. Your bars component did not declare the props it expects. Add props: ['d'] to its definition;
3. You cannot use {{}} syntax for SVG attributes (see errors in the console). Use v-bind:x or shorthand :x instead.

Working fiddle: https://jsfiddle.net/2rv60f4q/2/

[FEA5T]

Evan - thanks. #3 is probably not your fault and not a big deal...

Regarding #2:

Is there any way to make the template system transparent (optionally)? To just pass through all data as props automatically all the way down through the component when:

1? The data is declared data: d
2? As some Vue parameter option?

Compare this component-less example to your fiddle:

Component-less: https://jsfiddle.net/p98serxm/
Component: https://jsfiddle.net/2rv60f4q/2/

Look how simple it is! Notice how I don't need these redundancies:

1. Redundant data syntax data: { d: d }
2. Props props: ['d']
3. Html parameters <bars :d="d">

Why I think this is important:

When I first discovered Vue I was in shock, because of the simplicity of its design. Everything is _meticulously_ simple (without sacrificing any functionality). It literally could not be any cleaner if you tried - and that's beautiful.

However:

Doing in a component what a standard Vue instance can do requires 2 extra declarations and 1 extra abstraction in the way I pass data. That's not simple. I know there is great abstraction here - and reason for it - but often we don't need it - and Vue usually isn't the right place to do these abstraction (my opinion). Many times I just wan't the template to function in the exact way that the Vue instance functions - as if there was no template at all...which brings me to #1.

Regarding #1:

I don't ever pass data like this:

new Vue({
    el: "#id",
    data: {
        a: a,
        b: b,
        c: c,
        d: d
    }
})

In my opinion it shouldn't even be Vue's job to worry about this. I let Vue work on complex objects and package, name, alias the object however I want first.

var j = {
    a: a,
    b: b,
    c: c,
    d: d
}

new Vue({
    el: "#id",
    data: j
})

Root access: Obviously I need to be able to access the root data in props and the html. Not letting me access the root object in props and subsequently the html is doing a major disservice to your component system - because I have to use an expanded syntax.

Why: This combined with your props system makes the component system significantly more complicated than it needs to be - which goes against the reasons I chose Vue in the first place.

Solution: I am going to continue to use Vue but to be honest it is cleaner for me to inject that html manually and not have to worry about passing data around in the component system.

Please consider if a feature like this is something you think would benefit your framework in the future.

Thanks for the help!

[yyx990803]

Component is the boundary for simplicity. The whole point of components is so that you break your code into logically isolated units. If you feel it's redundant to pass data then you are probably using components prematurely when you don't actually need it. Remember Vue is not just for simple stuff. When you focus on "how simple it is", you probably don't realize the maintainability issues this will give rise to in large applications.

Re how to pass data: you are missing the point. The point is the data object you pass to a Vue instance is just a container - Vue needs to know the property name in order to reference to them in templates. In the case of

var d = {
  a: 123
}

new Vue({
  el: '#id',
  data: d
})

There's no way Vue can tell the original object has a variable name of d. You can only access a in your templates, because that is the top level property the Vue instance ever sees.

[FEA5T]

"Vue needs to know the property name in order to reference to them in templates."

Yes a. But it shouldn't need to know the parent object name! d

"There's no way Vue can tell the original object has a variable name of d. You can only access a in your templates, because that is the top level property the Vue instance ever sees."

But I don't need to know/care what the variable name is d. The only reason I have to put the name of the variable here is because passing data into components requires it (which I wouldn't have to do if there was an option to pass all data automatically). I only need access to a. If I could pass into components <bars :d="*"></bars> where * is the root then this issue would be resolved and it would be on to the next issue.

"Remember Vue is not just for simple stuff. "

Of course not, Vue is great at making complicated stuff simple - that's the best thing about Vue.

I am not saying that Vue should pass all data down automatically, I am just saying that I should have the option to do that.

[simplesmiler]

@FEA5T

1. You can pass the whole $data (but you can not assign the root of the component data).
2. You can have a single root property in your root instance data, and have all components accept the root and pass the root to the subcomponents.
3. You can make the data global, and observe it from every component.

All of the above options reduce reusability of your components to some extent.
Demo: http://jsfiddle.net/simplesmiler/8bynp8xn/

[FEA5T]

@simplesmiler
@yyx990803

Solutions:

abcd: http://jsfiddle.net/rfn3hxrc/3/
bar graph: https://jsfiddle.net/2rv60f4q/3/

Html

<div id="demo"></div>


<script type="x/template" id="demo-template">
    <span>{{a}} and {{b}}</span>
</script>

JS

var d = {
    a: 'Freindship',
    b: 'Magic'
};

new Vue({
    el: '#demo',
    data: d,
    template: '#demo-template',
    replace: false
});

By using the template system I can access all the data.

"you are missing the point"
"you are probably using components prematurely when you don't actually need it"

^ nail on the head

[jochantrelle]

Sorry late chimer... I see what FEA5T is saying... what none of you are saying though is... the loss of DRY by repeating data declarations props etc... is a small violation considering the benefits, modularity, re-usability etc. I think FEA5T gets it, however, this rant may just be so the rest of us can admit to our awe in FEA5T's brilliance. So I will say it, You FEA5T are indeed smarter than the teams of people developing frameworks, Vue included. May we get your resume?

[breezewish]

How to pass bulk of events elegantly? Let's say, to build a vue component called <v-button>: event listeners and properties need to be passed explicitly when using templates otherwise there is no easy way to bind event listeners:

<template>
    <button @mouseover="handleMouseOver" @mousemove="handleMouseMove" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @keydown="handleKeyDown" .....></button>
</template>

Besides, deriving the <v-button> to a child component (e.g. <v-ghost-button>) is difficult. Repeating those properties and event handlers again is a complete violation of DRY:

<template>
    <v-button @mouseover="handleMouseOver" @mousemove="handleMouseMove" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @keydown="handleKeyDown" .....></v-button>
</template>

Now, it seems that the only way to implement <v-ghost-button> is to merge its functionality into <v-button>.. Then it is a violation of KISS :(

[rpbarbati]

Yo FEA5T - try this solution. If I interpreted your desires correctly, you want a solution that has all the following traits...

Creates no dependencies on parent components.
Creates no dependencies on child components.
Does not require passing any data from component to component.
Does not require you to receive any data from any other component.
Does not even require any components at all.

Simple solution - does not even require vue. Here it is...

Create a data model in its own .js and export it. Import this data model in whatever components you want to use it. Use it.

The other answer is a question - why are you using vue? Just go back to regular javascript, declare a and b in page scope and access them exactly like you want.

[sirlancelot]

This issue is over two-year old, has been closed for quite some time, and doesn't even apply to the current state of Vue...