import Vue from ‘vue‘;
import com from ‘./component1‘;
Vue.component("com_name",com)//第一个参数是你为注册的组件定义一个id，第二个是你要注册的组件

//在组件内
import com from "../components/a_component";
export default {
  name: "home",
  components: {
    com_name: com //com_name 是你为注册的组件定义一的id，它会成为在<template>中使用时的标签名，com要注册的组件
  }
}

<template>
  <div id="home">
   <com_name></com_name>
  </div>
</template>

//父组件
<template>
  <div id="home">
    <input type="type" id="one" v-model.trim="picked" />
    <com test=‘12345‘></com> //在组件标签上添加一个属性 这里可以添加任意个 和任意种类型包括对象、数组甚至方法，如果是添加复杂类型 请使用:test的vue动态绑定语法，
                             //像这种html语法支持number和string，复杂的如对象方法会识别不了
  </div>
</template>

//子组件
<template>
  <div class="a_component-wrap">
    <h1>
      {{test}} //使用
    </h1>
  </div>
</template>

<script>
export default {
  name: "AComponent",
  props:["test"] //只有在这里声明过的props才能像data里面的属性一样正常使用，添加多个[‘test‘,‘test1‘,‘test2‘,...]，
                 //假设父组件在子组件上定义了test1 test2两个props，而子组件声明了test1，那么子组件使用test2的时候会报出 not defined
};
</script>

export default {
  name: "AComponent",
  props:{
    test1:{
      type:Boolean, //提供一个类型检查 如果这里定义的是boolean，那么父组件传递过来的数据就只能是boolean，否则报错
      default:false //提供一个默认值，当父组件没有将test1传递过来的时候，子组件上test1的值会是false，它和type可以只有type 或只有default或都有
    }
  }
};