Introduction to the usage of props in Vue

<template>

  <div>

    <h3>I am {{name}}, I am {{age}} years old, my hobby is {{hobby}}</h3>, {{flag}}

  </div>

</template>



<script>

export default {

    name:'Cpn',

    // Simple reception /* props:['age','hobby','name'], */

    // Declare the data to be received and restrict the received data when declaring props:{

        name: {

            //Declare type type:String,

            //Declare whether it is required: true,

            // Declare the default value default:'default value'

        },

        age:{

            type:Number,

            require:true,

            default:18

        },

        hobby:

            type:String,

            require:false

        },

        flag:{

            type:Boolean,

            require:false

        }

    }

}

</script>

<template>

  <div id="app">

    <!-- <cpn name='李明' age="22" hobby="playing ball"></cpn>

    <cpn name="Xiaohong" age="20" hobby="Playing the piano"></cpn> -->

    <cpn name='李明'></cpn>

    <cpn hobby="Programming" :flag="flag"></cpn>

      <!--Note: If you want to pass the data in the current component data to the child component, you need to pass it in the form of v-bing: variable name = "variable name". If the data passed is not in data, there is no need to add the binding instruction, that is, v-bind (can be abbreviated as:) -->

    <button @click="changeFlag">Switch</button>

  </div>

</template>

<script>

import Cpn from './components/Cpn.vue'

export default {

  components: { Cpn },

  name: "App",

  data() {

    return {

      flag:false

    }

  },

  methods: {

    changeFlag(){

      console.log(this.flag)

      this.flag=!this.flag;

      console.log(this.flag)

    }

  },

}

</script>