Vue.jsで親ViewModelにcomponentをぶら下げてデータを共有
6777 ワード
あるページに一つの親ViewModelがあって、そいつが持っているDataModelを親ViewModel配下のcomponentがいじるような設計を試してみた。
構成は以下のような感じ
ViewModelのdataにDataModelを入れてその値をcomponentが読み出す感じ。
ソースは以下
<h1>Component Test</h1>
<div class="main">
{{title}}
<my-component-one data="{{$data}}"></my-component-one>
<my-component-two data="{{$data}}"></my-component-two>
<button v-on="click:output">
check
</button>
</div>
<div class="output">
</div>
<my-component></my-component>
var dataModel = {
title: "Title",
one: "component1",
two: "component2"
};
var MyComponent_one = Vue.extend({
template: '<p v-on="click:rewrite">{{data.one}}</p>',
props: ['data'],
methods:{
rewrite: function(){
this.data.one = "rewrite";
}
}
});
var MyComponent_two = Vue.extend({
template: '<p v-on="click:rewrite">{{data.two}}</p>',
props: ['data'],
methods:{
rewrite: function(){
this.data.two = "rewrite";
}
}
});
var mainViewModel = new Vue({
el: ".main",
data: dataModel,
methods: {
output: function(){
$('.output').html(this.$data.one + " " + this.$data.two);
}
},
components: {
"my-component-one": MyComponent_one,
"my-component-two": MyComponent_two
}
});
文字列をクリックしたらデータが書き換わる。checkボタンでDataModelの中身を確認すると書き換わっているのがわかる。
この設計がいいかはわからないけど、とりあえずやりたいことはできた。
jsfiddle
Author And Source
この問題について(Vue.jsで親ViewModelにcomponentをぶら下げてデータを共有), 我々は、より多くの情報をここで見つけました https://qiita.com/nasum/items/1244cb44c832dda7f7d5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .