转在https://www.cnblogs.com/moqiutao/p/8328931.html

[vue从入门到进阶：组件Component详解（六）]

1.定义一个全局组件

<div id="example">
  <my-component></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
var vm = new Vue({
  el: '#example',
  data: {
       
  } 
})

或者2
// 注册
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});
// 注册
Vue.component('my-component', MyComponent);
var vm = new Vue({
  el: '#example',
  data: {
       
  }
})
3.Vue.extend()使用说明 Vue.extend( options )的使用。
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

2.局部注册

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

总结。

html:
<vue-layui-input  
inp-name="你好"  //input 名字
 inp-type="text"  //input 类型
v-model="organ.organCode" //绑定的model元素
 v-bind:deful="organ.organCode"> //默认值（我觉得可以去掉）
                    </vue-layui-input>
//注册的组件。
Vue.component('vue-layui-input', {
    props: {inpName:['inpName'],inpType:['inpType'],deful: ['deful']},
    methods: {
        change(value) {
            console.log(value)
            this.$emit('input', value);
        }
    },
    template: '<div class="layui-form-item">' +
        '                        <div class="col-md-1"></div>' +
        '                        <div class="col-md-11">' +
        '                            <label class="layui-form-label" style="width: 110px">{{inpName}}{{inpType}}</label>' +
        '                            <div class="layui-input-block">' +
        '                              <input v-bind:type="inpType" v-bind:value="deful" class="layui-input" v-on:input="change($event.target.value)" style="margin-left: 10px;"/>'+
        '                            </div>' +
        '                        </div>' +
        '                    </div>'
});
//注意的是 在修改值后需要   v-on:input="change($event.target.value)"   触发 this.$emit('input', value);