Communication between components in Vue.js

This time I will bring you the communication between Vue.js components. What are the precautions when using the communication between Vue.js components. The following is a practical case, let's take a look.

Pass number=99 to the subcomponent

<template>
  <div id="myapp">
    <com-a number=99></com-a>
  </div></template><script>
  import ComA from &#39;./components/a.vue&#39;
  export default {    components: {
      ComA
    }
  }</script>

In the subcomponent a.vue

<template>
  <div class="hello">
    {{hello}}
    {{ number }}  </div></template><script>
  export default {//    声明number属性//    未指定类型//    props: [&#39;number&#39;],//    指定类型
    props: {      &#39;number&#39;: [Number, String]
    },
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    }
  }</script>

Execution effect

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Vue tag attributes and conditional rendering of Vue.js

Vue.js Computed properties and data listening

The above is the detailed content of Communication between components in Vue.js. For more information, please follow other related articles on the PHP Chinese website!