Vue.js コンポーネント

コンポーネントは<aaa>のようにオリジナルのタグを作る機能です。

				
    <aaa></aaa>

値連携なし(Vue 3)

src/components/aaa.vue


<script setup>
import { ref } from 'vue'

const count = ref(0)

function exec() {
  count.value++
}
</script>

<template>
  <button @click="exec"> Click!! {{ count }} </button>
</template>

src/App.vue


<script setup>
import aaa from './components/aaa.vue'
</script>

<template>
<aaa></aaa>
</template>

import aaaでタグ名を指定しています。

値連携なし(Vue 2)

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <aaa></aaa>
    </div>
    <script>
        Vue.component('aaa', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="exec"> Click!! {{ count }} </button>',
            methods: {
                exec: function () {
                    this.count++;
                }
            }
        });

        var app = new Vue({
            el: '#app'
        });
    </script>
</body>

</html>

Vue.componentでコンポーネントを定義します。

Vue.componentの中は基本的にnew Vueと同様ですが、
el が使えないのとdataの中は関数の形にします。

画面イメージ

propsで親→子にデータ連携(属性値そのまま)

src/components/aaa.vue


<script setup>
import { ref } from 'vue'

const props = defineProps(['bbb'])
console.log("debug:" + props.bbb)
</script>

<template>
  <h3>{{ bbb }}</h3>
</template>

src/App.vue


<script setup>
import aaa from './components/aaa.vue'
</script>

<template>
  <aaa bbb="Hello World!!"></aaa>
</template>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <aaa bbb="Hello World"></aaa>
    </div>
    <script>
        Vue.component('aaa', {
            props: ['bbb'],
            template: '<h3>{{ bbb }}</h3>'
        })

        var app = new Vue({
            el: '#app'
        });
    </script>
</body>

</html>

親のタグ(aaa)の属性(bbb)の値を子(h3)で表示しています。
propsで連携する属性を指定します。

画面イメージ

propsで親→子にデータ連携(属性値とJavaScript処理の連携)

src/App.vue


<script setup>
import { ref } from 'vue'
import aaa from './components/aaa.vue'

const message = ref('Hello World!!')
</script>

<template>
  <aaa v-bind:bbb="message"></aaa>
</template>

src/components/aaa.vue


<script setup>
import { ref } from 'vue'

const props = defineProps(['bbb'])
console.log("debug:" + props.bbb)
</script>

<template>
  <h3>{{ bbb }}</h3>
</template>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <aaa v-bind:bbb="message"></aaa>
    </div>
    <script>
        Vue.component('aaa', {
            props: ['bbb'],
            template: '<h3>{{ bbb }}</h3>'
        })

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World!!'
            }
        });
    </script>
</body>

</html>

画面イメージ

親のタグ(aaa)の属性(bbb)で指定したJavaScriptの値(message)を子(h3)で表示しています。
propsで連携する属性を指定し、v-bindでJavaScriptの値と紐付けます。

$emitで子→親にイベント連携

src/components/aaa.vue


<script setup>
</script>

<template>
  <button @click="$emit('callFromChild', 'World')"> Hello </button>
</template>

src/App.vue


<script setup>
import aaa from './components/aaa.vue'

function showMsg(msg) {
  alert(msg)
}
</script>

<template>
  <aaa @callFromChild="showMsg"></aaa>
</template>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <aaa v-on:callFromChild="showMsg"></aaa>
    </div>
    <script>
        Vue.component('aaa', {
            template: `
    <button v-on:click="$emit('callFromChild', 'World')">
      Hello
    </button>
  `
        });

        var app = new Vue({
            el: '#app',
            methods: {
                showMsg: function (msg) {
                    alert(msg)
                }
            }
        });
    </script>
</body>

</html>

画面イメージ

$emitで親にイベント送信できます。引数には送信先を指定します。
引数を渡したい場合は送信先の後ろに付けられます。

$emitで子→親にイベント連携(データ送信)

src/components/aaa.vue


<script setup>
import { ref } from 'vue'
const message = ref('World')
</script>

<template>
  <input type="text" v-model="message" />
  <button @click="$emit('callFromChild', message)"> Hello </button>
</template>

src/App.vue


<script setup>
import aaa from './components/aaa.vue'

function showMsg(msg) {
  alert(msg)
}
</script>

<template>
  <aaa @callFromChild="showMsg"></aaa>
</template>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <aaa v-on:callFromChild="showMsg"></aaa>
    </div>

    <script>
        Vue.component('aaa', {
            template: `
    <div>
        <input type="text" v-model="message" />
        <button v-on:click="buttonClick">
            Hello
        </button>
    </div>
  `,
            data: function () {
                return {
                    message: 'World'
                }
            },
            methods: {
                buttonClick: function () {
                    this.$emit('callFromChild', this.message);
                }
            }
        });

        var app = new Vue({
            el: '#app',
            methods: {
                showMsg: function (msg) {
                    alert(msg)
                }
            }
        });
    </script>
</body>

</html>

template下は複数のタグを指定できない？のでdivで囲んでみました。
v-modelで属性値を連携させ、それを親に送っています。

画面イメージ

ページのトップへ戻る