组件原理/组成

组件（Component）扩展 HTML 元素，封装可重用的代码，核心目标是为了可重用性高，减少重复性的开发。

组件预先定义好行为的ViewModel类。代码按照template\style\script的拆分方式，放置到对应的.vue文件中。

最核心的选项有：

模板（template）--用表现数据与展现给用户的DOM之间的映射关系。

初始数据（data）--数据初始状态。

接受外部参数（props）--组件之间通过参数来进行数据的传递和共享。

方法（methods）--对数据的改动操作一般都在组件的方法内进行。通过v-on指令将用户输入事件和组件方法进行绑定。

生命周期钩子函数(lifecycle hooks)--created\attached\destroyed

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件定义与应用

1）模块系统

新建文件（piclist.vue）

<template>
    <div>
        <ul>
            <li v-for="p in pro">
                <img src="@/static/images/{{p.pic1.jpg}}" alt="" style="width:200px;height:200px">
                {{p.proName}}</li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: "picList",
        data(){
            return {
                'pro':[
            {'id':1,'proName':'小白桌','propic':'pic1.jpg','desc':''},
            {'id':2,'proName':'小白桌','propic':'pic2.jpg','desc':''},
            {'id':3,'proName':'小白桌','propic':'pic3.jpg','desc':''},
            {'id':4,'proName':'小白桌','propic':'pic4.jpg','desc':''},
            {'id':5,'proName':'小白桌','propic':'pic5.jpg','desc':''},
            {'id':6,'proName':'小白桌','propic':'pic6.jpg','desc':''},
                ]
            }
        }
    }
</script>

<style scoped>

</style>

应用

 <piclist></piclist>
 <script>
    import piclist from '@/components/picList.vue';
    export default {
        name: "product",
        components:{
            piclist
        }

    }
</script>

2）全局注册

Vue.component('componentName',functionComponent);

1.传入对象

Vue.component('customCom',{template:'<div>A custom component!</div>'})

2.传入function

var Mycom=Vue.extend({ // 选项})

Vue.component('customCom',Mycom)

应用：<customCom></customCom>

3）局部注册

让组件只能用在其他组件内部，用components注册

<div id="app">
    <parent></parent>
</div>
 
<script>
//对象形式传入
var Child = {
  template: '<h1>自定义组件!</h1>',
  replace:true
}
//function传入
var Parent=Vue.extend({
    template:'<child></child>'
    components:{
    	'child':Child
    }
})
 
// 创建根实例
new Vue({
  el: '#app',
  components: {    
    'parent': Parent
  }
})
</script>

数据传递

三种方式：props 组件通信（自定义事件） slot

props

1.props其本使用

<template>
    <div>
        <h2>{{title}}</h2>
        <ul>

            <li v-for="p in pro" :key="p.id">
                <img v-bind:src="'/assets/images/'+p.propic" alt="" style="width:200px;height:200px">
                {{p.proName}}</li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: "picList",
        props:['title'],
        data(){
            return {
                'pro':[
            {'id':1,'proName':'小白桌','propic':'pic1.jpg','desc':''},
            {'id':2,'proName':'小白桌','propic':'pic1.jpg','desc':''},
            {'id':3,'proName':'小白桌','propic':'pic1.jpg','desc':''},
            {'id':4,'proName':'小白桌','propic':'pic1.jpg','desc':''},
            {'id':5,'proName':'小白桌','propic':'pic1.jpg','desc':''},
            {'id':6,'proName':'小白桌','propic':'pic1.jpg','desc':''},
                ]
            }
        }
    }
</script>

<style scoped>

</style>

 <piclist title="产品列表"></piclist>

2.props动态语法

利用v-bind绑定一个表达式。

<piclist :title="title"></piclist>

3.绑定修饰符

.sync 双向绑定 .once 单次绑定

<piclist :title.sync='title'></piclist>//把子组件同步父组件

<piclist :title.once='title'></piclist> //当父组件的属性变化时，将传导给子组件，反过来不会

4.prop验证

组件可以为 props 指定验证要求。为了定制 prop 验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-com', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    pA: Number,
    // 多个可能的类型
    pB: [String, Number],
    // 必填的字符串
    pC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    pD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    pE: {
      type: Object,      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    pF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

type 可以是下面原生构造器：String、Number、Boolean、Array、Object、Date、Function、Symbol type 也可以是一个自定义构造器，使用 instanceof 检测。

当 prop 验证失败的时候，Vue.js 将会产生一个控制台的警告。

5.prop转换函数

pG: {
      coerce: function (value) {        
        return value+''  //将值转换为字符串
      }
    }
    
pH:{
	coerce:function (value){
		return JSON:parse(val)
	}
}    

6.props&propsData &Data

propsData 常用来在组件初始化后覆盖props中的属性。

以上所述是IT禅师之道 给大家介绍的Vue.js中 表单绑定数据，希望对大家有所帮助，如果大家有任何疑问请给我留言， IT禅师之道 及时回复大家的。感谢你关注IT禅师之道。