###この本を書いたきっかけは？何についての記事？
「これから始める、Vue.js実践入門」（山田祥寛/著、SBクリエイティブ株式会社/発行）のリスト4-14あたりをlaravel8のプロジェクト内でやりたかったので、コードを少し改変してみた。
###参考にさせていただいたサイトなど
https://orkhan.dev/2020/04/14/accessing-parent-and-child-component-in-vuejs/
https://laracasts.com/discuss/channels/vue/vuejs-component-within-component-getting-data-from-child-component
https://vegibit.com/how-to-create-a-child-component-in-vuejs/
https://stackoverflow.com/questions/45387307/define-vue-component-in-laravel
###前置きはこれくらいにして
app.js
import App3 from './components/MyComponent3.vue'
const app3 = new Vue({
el: '#app3',
components: {
App3
},
});
MyComponent3.vue
<template>
<div>
<div>
<p>現在値：{{ current }}</p>
</div>
<mycomponent4 step="1" v-on:plus="onplus"></mycomponent4>
<mycomponent4 step="2" v-on:plus="onplus"></mycomponent4>
<mycomponent4 step="-1" v-on:plus="onplus"></mycomponent4>
</div>
</template>
<script>
import mycomponent4 from './MyComponent4.vue';
export default {
components: {mycomponent4},
data: function () {
return {
current: 0,
}
},
methods: {
onplus: function (e) {
this.current += e;
},
},
};
</script>
MyComponent3.vue
<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>
index.blade.php
<!doctype html>
<html lang="ja">
<head>
<title>Index</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div id="app3">
<app3>
</app3>
</div>
<script src="{{ mix('js/app.js')}}">
</script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
</body>
</html>
HelloController.php
class HelloController extends Controller
{
public function index()
{
return view('hello.index', $data);
}
}
※ボタンを押すと、現在値の数字が、ボタンに書かれている数だけ変動します。
ここまで読んでいただき、ありがとうございました。何かの参考になれば幸いです。