vue 学习四 了解组件

Posted 2021-03-26 wrhbk

1组件的注册

   全局注册

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>

2组件通讯

 父组件传值给子组件 props

  第一种

 在子组件中使用props：[],将其定义成一个数组的方式

//父组件
<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>

第二种

  在子组件中使用props：{}

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

 

值得一提的是，为什么组件里的data会是一个function，这是为了保证在多个地方使用这个组件的时候，组件的实例是独立的，比如说，你有一个计时器组件，你在三个地方使用了它，第一个时间显示为20 第二个为10 第三个为0，这三个实例都是独立的，但如果组件中的data是一个对象，那么这三个实例就会都是一样的状态