Vue 组件开发

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率
**
**
**
**

延伸阅读：https://blog.youkuaiyun.com/YYxiaobao0726/article/details/86577481

1.组件命名： 短横线： 驼峰式： 注：如果是驼峰式，在引用时必须将其展开:my-component
2.基本用法：
全局注册 [父、根组件]

 <div id="app">  <my-component></my-component> </div> 
Vue.component('my-component ', { template:{`<div>                            <h1>......</h1>                            <p>......</p>                            <span>......</span>                    ...  </div>`  } }) 
let vm = new Vue({  el:"#app", }); 

驼峰式：

<div id="app">  <my-component></my-component> </div> 
Vue.component('myComponent ', {  //驼峰式，在引用时必须将其展开 
template:{`<div>                            <h1>......</h1>                            <p>......</p>                            <span>......</span>                    ...  </div>`  } }) 
let vm = new Vue({  el:"#app", });  

父子组件传值

在 Vue 中，父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 props 给子组件下发数据(3)，子组件通过事件给父组件发送消息(3)。
工作原理如下图

组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。
在组件中，使用选项props 来声明需要从父级接收的数据， props 的值可以是两种:
一种是字符串数组，一种是对象
2-1 字符串数组

<div id="app">
  <my-component  message="数据来自父组件">
  </my-component> 
 </div>
  Vue.component(
  'my-component', 
  {  props: ['message'],
    template: '<div>{{message}}</div>' }); 
    var app4 = new Vue({  el: '#app' });

渲染后的结果为：

<div id=”app4”>
	 <div ＞来自父组件的数据</div> 
</div> 

★★★
props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板 template 及计算属性computed 和方法methods 中使用。

数据message 就是通过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，如果要传递多个数据，在props 数组中添加项即可。

有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v -bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。

<div id="app">
  <input type="text" v-model="text"> 
   <my-component :value="text"></my-component>
 </div> 
  Vue.component(
  'my-component', 
  {    
    props: ['value'], 
     template: '<div>{{value}}</div>' 
    }
    );
       var app5 = new Vue({  
        el: '#app',
        data: { 
          text:'动态传递父组件数据'  
            }  
    });

需要注意的点:

1. 如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅仅是字符串。
   

2. 如果你想把一个对象的所有属性作为 prop 进行传递，可以使用v-bind:value=”对象名”的方式来传递，其中 value 指的是props传递的变量名:

todo:{
  text:"working hard at VUE",
    isComplate:true  
    }

然后:

<todo-item v-bind=”todo”></todo-item>

**将等价于: **

<todo-item     
   v-bind:value=”todo.text”       
    v-bind:is-complete=”todo.isComplete” > 
<todo-item>

2-2 对象
当prop 需要验证时，就需要对象写法。
一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。

Vue.component('example', {   props: {     // 基础类型检测 (`null` 意思是任何类型都可以)     propA: Number,     // 多种类型     propB: [String, Number],     // 必传且是字符串     propC: {       type: String,       required: true     },     // 数字，有默认值     propD: {       type: Number,       default: 100     },     // 数组/对象的默认值应当由一个工厂函数返回     propE: {       type: Object,       default: function () {         return { message: 'hello' }       }     },     // 自定义验证函数     propF: {       validator: function (value) {         return value > 10       }