组件

vue

参考：https://blog.csdn.net/u012123026/article/details/72460470

组件是可复用的实例

• 当需要复用组件时，data必须是一个函数

  data: function(){
     return {
       count: 0
     }
  }

这样每个实例都可以被返回一份独立的数据
否则如果:

  data: {
     count: 0
     }

所有组件都共享了同一份数据，对其中任意组件的操作都会影响到其它组件

注册

• 全局注册
  
  • 单文件
    Vue.use
  • vue文档方式
    Vue.component

Vue.use

import globalComponent from 'globalComponent'
Vue.use(globalComponent)
//一般一次引入所有组件

<template>
  <global-component/>
</template>

Vue.component

Vue.component('global-component',{
  data:function(){
     return {
     msg:'this is XXX'
     }
  },
  template:'#global-template'
}

<template id='global-template'>
   <div><input v-model='msg'/></div>
</template>

Vue.component方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
• 文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

**单文件组件*方法常用在vue单页应用中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html

• 局部注册
  如果有按需引入组件的需要，可以选择局部注册组件，这将减少工程打包后的容量尺寸。
  单文件：

<template>
  <local-component />
</template>
<script>
import localComponent from 'localComponent'
export default {
  components: {
    'local-component': localComponent
  }
}
</script>

一般方式

var localComponent = { /* ... */ }
new Vue({
   el:'#local'
   components: {
    'local-component': localComponent
  }
})

Vue.extend

new Vue 是一个实例
vue.extend 组件构造器 需要传入 component 进行注册
vue.component 直接注册组件内部已经自动构造了

<div class="col-xs-12 text-center bg-info">
        <your-vue></your-vue>
</div>
<div class="col-xs-12 text-center bg-warning">
        <y-o-u-r-v-u-e></y-o-u-r-v-u-e>//局部注册组件对象中的键名 YOURVUE 必须被看作驼峰式命名，而自定义标签必须写作短横分隔式
          <hr>
          <local-component></local-component>//注册时短横分隔式命名的组件，其自定义标签直接使用组件注册名
</div>

var localComponent =Vue.extend({
   data: function() {
        return {
           msg: '这是组件内部信息',
           i: 1
         }
    },
   methods:{
     add:function(){
        this.i++
     }
   },
   template: '<div>{{ msg }}</div><div>{{ i }}</div><button @click="add">组件内部数据操作</button>'
})
var myVue = Vue.extend({
   data: function() {
         return {
          msg: 'Hello, Vue.js!',//data 选项合并规则：无重复的属性保留，因此使用扩展实例构造器 myVue 构造的 Vue 实例中会有 myVue 扩展实例构造器中的 msg 数据
           i: 1,
           obj: {
            a: 1,
            b: 2
          }
         }
       },
    methods: {
        add: function() {
           this.i++
        }
      },
    components: {
         YOURVUE: localComponent,
         'local-component': localComponent
        }
    })
var vm1 = new myVue({
   data: {//data 选项，将会与扩展实例构造器 myVue 中 data 工厂函数所返回的数据按一定的规则合并
        newMsg: 'Amazing Vue.js',//无重复的属性保留，因此构造的 Vue 实例中也会有 newMsg 数据
        i: 100,//同名覆盖，myVue 中 data 工厂函数所返回的数据中 i 的值 1 被 100 覆盖
        obj: {
           b: 99,
           c: 3,
           d: 4
        }
       },
    methods: {//合并规则与 data 选项相同，因此最终的 Vue 实例方法中包含 add 和 add2，add 方法的作用是 i 自加 0.5，而不是 myVue 中声明的 i 自加 1
        add: function() {
           this.i += 0.5
         },
        add2: function() {
           this.i += 2
         }
       },
       components: {
         yourVue: localComponent
      }
    })

<template id="tp1">
<h3>{{name}}</h3>
      <div>
         Msg:
         <input type="text" v-model="msg" />
      </div>
      <div>The array in child component is: {{propA | json}}.</div>
       <div>The type of propB is : {{typeof propB}}</div>
       <button @click="changeElements">Click Me First</button>
       <button @click="sortElements">Then Click Me</button>
        <div v-if="number">The number is: {{number}}</div>
       <div v-else>The number is absent</div>
       <div>Other numbers: {{numbers | json}}</div>
       <div v-if="myNumber">Number object: {{myNumber | json}}</div>
        <div v-else>That's all.</div>//使用条件渲染，若 myNumber 有数据，则输出其 JSON 字符串，否则显示 That's all，Vue.js 2.0 中，v-show 后面不再跟 v-else，因此这里只能用 v-if
</template>

function number() {
     this.name = 'number'
     this.value = 3
   }//自定义 number 对象的构造函数
var myComponent = Vue.extend({
    props: {
       name: {
         type: String,
         default: 'Component'
       },
       msg: String,
       propA: {
         type: Array,
          required: true
      },
       propB: [String, Number],
       numbers: {
         type: Array,
         default: function() {
           return [1, 1, 2, 3, 5, 8, 13, 21]
         }
        },
       number: {
         type: Number,
         validator: function(value) {
           return value > 10
         }
       },
       myNumber: number
      },
    methods: {
      changeElements() {
        this.propA.push(Math.floor(Math.random() * 100))
       },
       sortElements() {
         this.propA = this.propA.sort((a, b) => a - b)
       }
     },
     template:'#tp1'
  })
 ```
 `
 <div class="container" id="app">
 <h2>通过 props 传递数据到子组件</h2>
     <div class="row">We have an msg: {{parentMsg}}. </div>
     <div class="row">
       Edit msg:
       <input type="text" v-model="parentMsg">
    </div>
    <div class="row">
       And the array in parent component is: {{arrData | json}}
     </div>
     <my-component :msg="parentMsg" :prop-a="arrData" prop-b="12" :numbers='[1,2,3]' :number="13"></my-component>
     //:msg="parentMsg"，表示通过数据绑定指令将父组件中的 parentMsg 作为 msg 传入子组件，“:”是“v-bind:”的简写，可用于普通 HTML 属性，也可用于组件的 props;
     //:prop-a="arrData"，表示通过数据绑定指令将父组件中的 arrData 作为 propA 传入子组件，用于演示数组在子组件中修改后对父组件中数据状态的影响，父子组件中的数据同步变化效果参见视频
     //prop-b="12"，表示直接传递 12 给 propB，这里的 12 必须看作是字符串 "12"，propB声明时已经指定可以是 String 或 Number，因此这里可以传递字符串没毛病
     //:numbers="[1,2,3]"，使用数据绑定指令将字面量数组 [1,2,3] 传递给 numbers，如果不使用数据绑定，传递的将会是字符串
     //:number="13"，使用数据绑定指令将字面量数值 13 传递给 number
     <my-component name="Another Component" :msg.sync="parentMsg" :prop-a="arrData" :prop-b="12" :my-number="myNumber"></my-component>
     //name="Another Component"，直接传递 "Another Component" 字符串给 name，和 src、class、style 等普通 HTML 属性类似，不使用数据绑定的 prop-x="XXXX" 传递的都是字符串
     //:msg.sync="parentMsg"，双向绑定 parentMsg 到 msg，为降低对父组件数据状态的副作用，.sync 修饰符在 Vue.js 2.0 中已废弃，使用 props 向子组件传递数据只能是单向的，并且不鼓励在子组件中修改 prop 的值
     //:prop-a="arrData"，表示通过数据绑定指令将父组件中的 arrData 作为 propA 传入子组件，用于演示数组在子组件中修改后对父组件中数据状态的影响，注意在 Vue.js 1.0 中，js 中的“驼峰式”标记在 HTML 中用作属性或指令参数……时要转为“羊-肉-串-式”，Vue.js 2.0 中由于引入了 Virtual DOM，在 HTML 中使用“驼峰式”或“羊-肉-串-式”均可
    //:prop-b="12"，使用数据绑定指令将字面量数值 12 传递给 propB，propB声明时已经指定可以是 String 或 Number，因此这里可以传递数值没毛病
    //:my-number="myNumber"，使用数据绑定指令将父组件中的 myNumber 对象传递给 myNumber
    <my-component name="Yet Another Component" :msg.once="parentMsg" :prop-a="arrData"></my-component>
    //:msg.once="parentMsg"，使用数据绑定指令将父组件中的 parentMsg 传递给 msg，使用修饰符 once 表示单次绑定，Vue.js 2.0 中 once 修饰符已废弃，可以在组件模板中局部使用新的 v-once 指令代替
</div>     
 var vm = new Vue({
     el: '#app',
     data: {
       arrData: [4, 27, 3, 12, 5, 9],
        parentMsg: 'Hello, Vue.js!',
       myNumber: new number()
     },
     components: {
       myComponent: myComponent
     }
   })

引用方式

你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用组件

 var apple = Vue.extend({
    ....
 })
 Vue.component('apple',apple) 
你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件
   new Vue({    
      components:{
        apple:apple
      }
   })

Vue.component 你可以创建 ，也可以取组件 例如下

var apple = Vue.component('apple')

初始化

prop

<template>
 <div class="blog-post">
  <h2>{{post.title}}</h2>
  <div v-html="post.content"></div>
  <button v-on:click="$emit('enlarge-text')"></button>
  Enlarge
  </div>
  //当模板包含内容不止一个时候，需要包裹一个父元素，解决every comp must have a single root elem的问题
</template>
<script>
export default {
  props: ['data'],
  data:{
     post:[]
  }
  created:function(){
  let data=this.data;
  var vm=this
  fetch('https;??')
   .then(function(response){
   return response.json()
   })
   .then(function(data){
   vm.posts=data
   })
  }
}
</script>
<style>
</style>

向父级触发事件（or 同时抛值），v-on 监听组件事件

可以调用$emit方法并传入事件的名字

<blog-post
 v-on:enlarge-text="postFontSize += 0.1"></blog-post>

组件中

<button v-on:click="$emit('enlarge-text',0.1)"></button>

在父级组件监听时可以通过$event访问

<blog-post
 v-on:enlarge-text="postFontSize += $event"></blog-post>

或者作为参数传入：

methods:{
  onEnlargeText:function(amount){
  this.postFontSize+=amount
  }
}

在组件上使用v-model

<input v-model="searchtxtx">
//等价于
<input
  :value="searchtxt"
  v-on:input="searchtxt=$event.target.value">

当用在组件上时：

<custom-input
 :value="searchtxt"
 v-on:input="searchtxt=$event
 ><custom-input>
 //则组件内input 需绑定到名为`value`的prop
 //input事件被触发时，抛出值
 <input
   :value="value"
   v-on:input="$emit('input',$event.target.value)">  

vm.$emit( event, […args] )

参数：

• {string} event
• [...args]
  触发当前实例上的事件。附加参数都会传给监听器回调。