vue注册组件以及组件的复用

最近想起来把vue的东西整理一下，一来为了巩固自己的记忆，二来为了能够让大家相互学习，走起！

1.注册组件

第一种：
  在组件内的script标签声明一个变量：
  const local_component = {template: '<div>我是注册的组件</div>' }

  在script中的 export default下创建：
  components: {
      'local_component': local_component,
    }

  在当前组件内的 template 直接引入以下代码即可：
  <local_component></local_component>

第二种：
   直接  components: {
  'local_component': {template: '<div>我是注册的组件</div>' }
    }

   同样在当前组件内的 template 直接引入以下代码即可：
   <local_component></local_component>

2.对组件的复用
上面的组册组件里面的传值都是死的，利用率不高，现在我们把它改成动态的。

第一种：
 在components: {
  'zujian':{props:['cont'],template: '<div>{{ cont }}</div>'},
    }
（也就是说通过props动态的传递我们想要传递的数据，cont为定义的属性名）

 在当前组件内的 template 直接引入以下代码即可：
 <zujian cont="我是自己填写的数据内容"></zujian>

 这样就是一个简单组件复用。

 第二种：
   一次循环多个组件出来
   在components: {
  'OList':{  props: ['todo'],template: '<div>{{ todo.text }}</div>'}
    }

   我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中
   <!--
   现在我们为每个 OList 提供 todo 对象
   todo 对象是变量，即其内容可以是动态的。
   我们也需要为每个组件提供一个“key”。
    -->

   在当前组件内的 template 直接引入以下代码即可：
    <OList
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></OList>

   在 export default 下创建
     data(){
      return{
        groceryList: [
          { id: 0, text: '我是循环出来的组件1' },
          { id: 1, text: '我是循环出来的组件2' },
          { id: 2, text: '我是循环出来的组件3' }
        ]
      }
    }

欧克这样所有的就搞定😄！觉得有用的小伙伴点个关注和小红心就行😄，么么哒。

友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！