laraval8 + vue.js2.6で、親子(parent-child)component間の通信について(propsや$emitを使わない場合=>.nativeの使い方)
この本を書いたきっかけは?何についての記事?
「これから始める、Vue.js実践入門」(山田祥寛/著、SBクリエイティブ株式会社/発行)のリスト4-16あたりをlaravel8のプロジェクト内でやりたかったので、コードを少し改変してみた。
参考にしたサイトなど
前に挙げた本以外、忘れてしまいました。思い出したら追記するかもです。
前置きはこれくらいにして
<template>
<div>
<div>
<p>現在値:{{ current }}</p>
</div>
<mycomponent4 step="1" v-on:click.native="onclick"></mycomponent4>
<mycomponent4 step="2" v-on:click.native="onclick"></mycomponent4>
<mycomponent4 step="-1" v-on:click.native="onclick"></mycomponent4>
</div>
</template>
<script>
import mycomponent4 from './MyComponent4.vue';
export default {
components: {mycomponent4},
data: function () {
return {
current: 0,
}
},
methods: {
onclick: function (e) {
this.current += Number(e.target.childNodes[0].nodeValue);
//console.log(e);
console.log(Number(e.target.childNodes[0].nodeValue));
},
},
};
</script>
.nativeってのがミソで、これがないと動きません。
e.target.childNodes[0].nodeValueってのがボタンに表示されてる値を指すわけですが、
これが正確にどう指定すればよいかはconsole.log(e);してからchromeのdevtoolでeの中身をポチポチ開いていった後に、右クリックで「Copy property path」すると間違いがなくて安心です。
<template>
<button type="button" v-on:click="onclick">{{ step }}</button>
</template>
<script>
export default {
data: function () {
return {
current: 0,
}
},
props: ['step'],
methods: {
onclick:function() {
this.$emit('plus', Number(this.step));
}
}
};
</script>
require('./bootstrap');
import Vue from 'vue'
import App3 from './components/MyComponent3.vue'
const app3 = new Vue({
el: '#app3',
components: {
App3
},
});
Controllerとか、実際の画面の動きとかはhttps://qiita.com/tarako2/items/942b1c5d9af9bb4bf946
と一緒なので参考にされてください。
ここまで見ていただいてありがとうございました。何かお役に立てれば幸いです。
Author And Source
この問題について(laraval8 + vue.js2.6で、親子(parent-child)component間の通信について(propsや$emitを使わない場合=>.nativeの使い方)), 我々は、より多くの情報をここで見つけました https://qiita.com/tarako2/items/e9a40525351b879230f5著者帰属:元の著者の情報は、元の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 .