0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

props,$emit

Last updated at Posted at 2020-09-03

#props
数字を使いたいファイル(渡される側)のところでprops:['number']のように定義する
渡す側のファイルでのようにnumberの指定
※親コンポーネントに置いているデータを使いたいときは、
の部分を
のようにしてv-bindでくっつける
v-bindはデータを動的に扱うためのもの

#$emit 子から親にデータを送る

  methods:{
        increment(){
            this.$emit("my-click",this.totalNumber+1);
        }
    }

<LikeNumber v-bind:totalNumber="number" v-on:my-click="number=$event"></LikeNumber>

#親のscriptにmethodsを書いて受け取る方法

export default {
  data(){
    return {
      number:14
    };
  },
  components:{
    LikeHeader
  },
  methods:{
    incrementNumber(value){
      this.number=value  #valueで$emitの値を受け取ることができる
    }
  }
}
</script>


0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?