どうも、豚野郎です。
今回はコンポーネントを使ってみようと思います。
今回もソースの動きを見ながらの検証です。
ドットインストールのソースを参考にしています。
(プログラムは異なります)
1. コンポーネントの呼び出し
内容は、ボタンをクリックすると、ボタン横数字とTotalの数がカウントされていくものです。
js/main.js
(function() {
'use strict';
let childComponent = Vue.extend({
props: {
message: {
type: String,
default: 'button'
}
},
data: function() {
return{
count: 0
}
},
template: '<button @click="countUp">{{ message }} {{ count }}</button>',
methods: {
countUp: function() {
this.count++;
this.$emit('increment');
}
}
});
let app = new Vue({
el: '#app',
components: {
'child-component': childComponent
},
data: {
total: 0
},
methods: {
incrementTotal: function() {
this.total++;
}
}
});
})();
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<p>Total: {{ total }}</p>
<child-component @increment='incrementTotal'></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
【ポイント】
・extend
サブクラスを作成する時に使います。
・props
propsで親コンポーネントから子コンポーネントに渡せる。
(上記のプログラムでは行っていない)
・コンポーネントのdataは関数で返すルール。
・this.$emit
今回はイベントの発火(index.html)。
他にも使い道がある(?)みたいなので、別の記事に今後書きます。
(今回はコンポーネントの検証のため)
・componentsの左の記載箇所はhtmlと同じにする。
・この場合、イベントを発火する際、htmlにも@increment='incrementTotal’の記載が必要。
(incremetの箇所は任意で決められる)
4. 親コンポーネントから子コンポーネントへのデータ渡し
以下のサイトを参考にさせて頂きます。
参考：http://www.code-magagine.com/?p=5939
js/main.js
// 親コンポーネント
Vue.component('comp-parent', {
template: '<div><h1>componentの親</h1><comp-child one="たけし" two = "たろう"/></div>'
})
// 子コンポーネント
Vue.component('comp-child', {
template: '<p>componentの子:{{ one }}と{{ two }}</p>',
//親から受け取る属性名
props: ['one', 'two']
})
new Vue({
el: '#app'
})
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<comp-parent></comp-parent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
propsに親から受け取る属性名を記載します。
属性名は自分で決まられます。
また、中をカンマ区切りすれば複数指定できました。
検証したところ「たけし」と「たろう」が表示されました。
3. 感想
まだわからないことが多いので学習していきます。