■親コンポーネントから子コンポーネントへ値の渡し方
<子コンポーネント 渡したい変数名="値"></子コンポーネント>
props: [
'渡したい変数名'
],<!-- 親コンポーネントから子コンポーネントへ値の渡し方サンプル -->
<div id="app">
<button-counter init_count="100"></button-counter>
</div>
Vue.component('button-counter', {
props: [
'init_count'
],
data: function () {
return {
count: this.init_count
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})■子コンポーネントから親コンポーネントへ値の渡し方
1.親コンポーネントに渡したいところで
this.$emit(‘通知名‘, 値)
2.親コンポーネントで通知を受け取る
<子コンポーネント v-on:通知名=’受け取った時に実行する関数‘>
<!-- 子コンポーネントから親コンポーネントへ値の渡し方サンプル -->
<body>
<div id="app">
<button-counter v-on:notice_add='parent_add'></button-counter>
</div>
<script>
$(function(){
// 子コンポーネント
Vue.component('button-counter', {
props: [
],
data: function () {
return {
count: 0
}
},
methods: {
child_add: function(){
this.$emit('notice_add', this.count)
}
},
template: '<button v-on:click="child_add">You clicked me {{ count }} times.</button>'
})
// 親コンポーネント
new Vue({
el: '#app',
methods: {
parent_add: function(child_count){
alert('parent_add:'+child_count);
}
}
})
});
</script>
</body>値の送りたい時は
this.$emit(‘notice_add’, this.count)
parent_add: function(child_count){
とすればよい
■他のコンポーネントへ値の渡し方
1.おまじない
var bus = new Vue();
2.値を渡したいところで
bus.$emit(‘通知名‘, 値)
3.通知を受け取りたいコンポーネント側で
mounted: function(){
bus.$on(‘通知名‘, 受け取った時に実行する関数)
},
<!-- 他のコンポーネントへ値の渡し方サンプル -->
<body>
<div id="app">
<button-counter></button-counter>
</div>
<script>
$(function(){
var bus = new Vue();
// 子コンポーネント
Vue.component('button-counter', {
props: [
],
data: function () {
return {
count: 0
}
},
mounted: function(){
bus.$on('notice_add', this.another_add)
},
methods: {
child_add: function(){
this.count++;
bus.$emit('notice_add', this.count)
},
another_add: function(another_count){
alert('another_add:'+another_count);
}
},
template: '<button v-on:click="child_add">You clicked me {{ count }} times.</button>'
})
// 親コンポーネント
new Vue({
el: '#app',
})
});
</script>
</body>