1、什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。vue组件是把页面（html代码，CSS代码）进行模块化

2、作用

封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。提高代码的复用性

3、组件的使用方法

3.1、全局注册

<my-component></my-component>

  Vue.component('my-component',{
    template:'<div>我是组件的内容</div>'
  })
new Vue({
  el:'#app',
  data:{ }
})

3.1.1、优点：

所有的nue实例都可以用

3.1.2、缺点：

权限太大,容错率降低

3.2局部注册

 <app-component></app-component>

components:{
    'app-component':{
       template:'<div>我是局部组件的内容</div>'
    }
  },
  data:{ }

3.3、table标签受阻

vue组件的模板在某些情况下会受到html标签的限制；

比如<table>中只能含有<tr>,<td>有这些元素，所以直接在table中使用组件是无效的；

此时可以使用is属性来挂载组件

    <table>
        <tbody is="my-component"></tbody>
    </table>

3.4、组件使用的技巧

推荐使用小写字母加-进行命名（必须）child, my-componnet命名组件
template中的内容必须被一个DOM元素包括，也可以嵌套
在组件的定义中，除了template之外的其他选项—data,computed,methods
data必须是一个方法

3.5、使用props传递数据父亲向儿子传递数据

在组件中使用props来从父亲组件接收参数，注意，在props中定义的属性，都可以在组件中直接使用
propps来自父级，只要写在父级标签内的子级标签的内容，都是父级写给子级的，而组件中data return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，computed，methods中直接使用
props的值有两种，一种是字符串数组，一种是对象
可以使用v-bind动态绑定父组件来的内容

3.6、单向数据流

3.6.1、解释 : 通过 `props` 传递数据是单向的了，也就是父组件数据变化时会传递给子组件，但是反过来不行。

3.6.2、目的 :是尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。

3.6.3、应用场景: 业务中会经常遇到两种需要改变 prop 的情况。

一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。

父组件通过字符串传递，接收的只是字符串

步骤一：注册组件 
步骤二：将父组件的数据传递进来，并在子组件中用props接收 
步骤三：将传递进来的数据通过初始值保存起来

//将父组件传进来的数据作为初始值保存
<div id="app" :style="style1">{{text1}}
      <app2 text2="我是父组件传的数据,我是app2" ></app2>
</div>
------------------------------------------------------------
 Vue.component('app2',{
    props:['text2'],
    template:'<div :style="style2">{{count}}</div>',
    data(){
      return{
        count:this.text2,
        style2:{
          height:'50px',
          border:'1px solid blue',
        },
      }
    },
  }),
  new Vue({
    el:'#app',
    
    data:{
        text1:'大家好，我是app',
        style1:{
             height:'100px',
             border:'1px solid red',
        },
    }

另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了

父组件通过加：来传递数据，内容相当于js内容

步骤一：注册组件 
步骤二：将父组件的数据传递进来，并在子组件中用props接收 
步骤三：将传递进来的数据通过计算属性进行重新计算

//通过input输入的数据改变div的宽度
<input type="text" v-model="width">
      <app3 :width="width"></app3>
      
 Vue.component('app3',{
    props:['width'],
    template:'<div :style="style"></div>',
    data(){},
    computed:{
      style(){
        return{
          width:this.width+'px',
          background:'rgb(192,192,192)',
          height:'30px',
          
        }
      }
    }
  })
  new Vue({
    el:'#app',
    
    data:{
        width:0,
        text1:'大家好，我是app',
        style1:{
             height:'250px',
             border:'1px solid red',
        },
    }
    
  })

《vue-组件》