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

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

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

1.定义一个全局组件

  


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

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

2.局部注册

var Child = {
  template: '
A custom component!
'
}

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

总结。

html:
 //默认值（我觉得可以去掉）
                    
//注册的组件。
Vue.component('vue-layui-input', {
    props: {inpName:['inpName'],inpType:['inpType'],deful: ['deful']},
    methods: {
        change(value) {
            console.log(value)
            this.$emit('input', value);
        }
    },
    template: '
' +
        '                        
' +
        '                        
' +
        '                            {{inpName}}{{inpType}}' +
        '                            
' +
        '                              '+
        '                            
' +
        '                        
' +
        '                    
'
});
//注意的是 在修改值后需要   v-on:input="change($event.target.value)"   触发 this.$emit('input', value);