vue组件复用 props 传值 （父传子）

公共组件具有更好的复用性，当然，要根据实际情况选择全局或局部组件。

全局组件

1. props:['init'] 可以以数组的形式定义
2. props：{init:{type:"类型",default:"默认值",required:"是否必传"}}

• 全局组件注册

    //在 main.js 中引入全局公用组件Count.vue
    import Count from '@/components/Count.vue'

    Vue.component('MyCount',Count) //组件名为 MyCount

• 引入使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <MyCount :init="1"></MyCount>
    <!-- init 为自定义名 传入数字 1 -->
  </div>
</template>

• 全局组件

<template>
  <div>
    我是全局组件
    <hr />
    {{ init }}-----{{ ab }}----{{ count }}
    <button @click="count += 10">按钮</button>
  </div>
</template>

<script>
    export default {
      name: "",
      props: {
        init: {
          default: 0,
        },
        ab: {
          type: String, //规定传入类型
          default: "2",//默认值
          required: true,//必传
        },
      },
      data() {
        return {
          count: this.init,//如果要修改props 的值只能通过这种弄形式，因为props是只读的
        };
      },
    };
</script>

局部组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <MyCount :init="1"></MyCount>
    <!-- init 为自定义名 传入数字 1 -->
  </div>
</template>

<script>
    components:{
        MyCount
    }
<script>

---

-----不详之处请多多指教！