Entries from 2020-09-08 to 1 day

子コンポーネントのイベントの値を親コンポーネントへ送る方法

イベントと値を送出する イベントを特定の値付きで送出すると便利なことがあります。例えば、<blog-post> コンポーネントにテキストをどれだけ拡大するかを責務とさせたいかもしれません。そのような場合、$emit の2番目のパラメータを使ってこの値を提供することができ</blog-post>…

コンポーネントのpropsで静的/動的な値の受け渡しとその書き方の違い

子コンポーネント button-mark.vue<template> // {{ name }}を追加して表示させる<button v-on:click="mark = mark + \'!\'">Hello {{ name }}{{ mark }}</button></template> <script>export default{props: ['name'], // propsで’name’を列挙data: function () {return {mark: '!'}},}</script> 続いて親コンポーネント main.vue<template><p></p></template>

オブジェクトの分割構文

setup({ name, color}) こういう書き方の時、{}自体は「props」を表し、そのpropsの中にあるnameやcolorといったデータを使うよというのを上のような書き方で表せる。 setupの中ではいちいちprops.nameと書かなくても、単にnameだけで良いので簡単