Vue.js组件化开发（一）

Vue组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

vue是一个完全支持组件化开发的框架。Vue中规定组件的后缀名是 .vue。

例如vue项目目录中的App.vue文件本质上就是一个vue组件。

什么是组件

组件（Comonent）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

组件的创建

全局组件

（1）使用Vue.extend创建组件

<div id="app">
    <my-com1></my-com1>    <!--组件名称  驼峰命名法改成用-连接 -->
</div>

// 1.创建组件模板
var com1=Vue.extend({
    template:`<h2>这是使用 Vue.extend 创建的组件</h2>`
})

// 2.进行组件的注册
Vue.component('myCom1',com1);   // （组件名称，组件模板）

//3.创建Vue实例
new Vue({
    el:'#app'
})

（2）直接使用Vue.component的方式创建

<div id="app">
    <my-com1></my-com1>    <!--组件名称  驼峰命名法改成用-连接 -->
</div>
<script>
    Vue.component('myCom1',{
        template:`<h2>这是直接使用 Vue.component 创建出来的组件</h2>`
    });   // （组件名称，组件模板）
    //3.创建Vue实例
    new Vue({
        el:'#app'
    })
</script>

（3）使用template元素定义组件的HTML结构，使用id注册组件

<div id="app">
    <my-com1></my-com1>
</div>
<template id="test">
    <div>
        <h1>这是通过 template 元素,在外部定义的组件结构(带有data的组件：{{msg}})</h1>
    </div>
</template>
<script>
    Vue.component("myCom1",{
        template:"#test",
        data:function(){    //data(){
			return{
				msg:'组件的data'
			}			
		}
    })
    new Vue({
        el:'#app',
    })
</script>

注意：组件中的data必须是一个方法，返回一个对象；而实例中的data可以为一个对象。

局部组件

<div id="app">
    <demo></demo>
</div>
<template id="test">   <!--模板-->
    <div>
        <h2>西柚</h2>
        <h3>薄荷</h3>
        <h4>{{ msg }}</h4>
    </div>
</template>
<script>
    new Vue({
        el:'#app',
        data:{ }
        components:{
            demo:{      //注册局部组件----demo	
                template:'#test',
                data(){     //组件中的data必须是函数，只能在模板中使用（实例中的div获取不到）
                    return {
                        msg:'柠檬'
                    }
                }
            }
        }
    })
</script>

vue组件的构成

每个vue组件都由三部分构成：

（1）template——>组件的模板结构（必须有）

（2）script——>组件的JavaScript行为（可选）

（3）style——>组件的样式（可选）

template

在组件的 节点中，支持使用前面所学的vue指令语法。

例如：

<template>
	<div>
		<p>生成随机数：{{Math.random()}}</p>    //使用{{}}插值表达式
		<button @click="showInfo">点击</button>
	</div>
</template>

script

<script>
export default {
  name: "MyVue",
  data(){        //组件中的 data 必须是函数
    return {
    	count:0,
     	title:'存放数据'
    }
  },
  methods:{     //事件处理函数
    func(){
     	this.count++
    }
  }
}
</script>

（1） name 节点：指向当前组件的名称（每个单词首字母大写）
（2）data 节点：组件中的data 必须是函数，vue 组件渲染期间需要用到的数据，可以定义在 data 节点中
（3）methods 节点：组件中的事件处理函数

style

可以在 <style> 节点中编写样式美化当前组件的 UI 结构。

<style scoped>    //让样式在局部生效，防止冲突
//scoped属性：用来自动为每个组件分配唯一的自定义属性，并自动为当前组件的DOM标签和style样式应用这个自定义属性，防止组件样式冲突。
</style>

组件的props属性

props 是组件的自定义属性，主要用于接收组件外部传过来的数据（参数）。

（1）父组件传递数据：

App.vue组件：
<template>
  <div id="app">
    <User name="xxx" id="xx"> </Users>
  </div>
</template>

（2）子组接收参数

• 方式一（只接收）

子组件User.vue
<script>
export default{
	name:"User",
	props:['name','id']
}
</script>

• 方式二（限制类型、必要性），进行props验证

子组件User.vue
<script>
export default{
	name:"User",
	props: {
		//name:String,   //接收数据的同时只限制类型
		//name:[String,Number],   //prop属性值类型不唯一时
		//id:Number
		
	    name: {  
	      type: String,
	      require: true  //表示此属性是必填项，name是必要的
	    },
	    id:{
		  type: Number,
	      require: true，
	     // default:111   //设置默认值，如果没有指定id的值，则id默认值为111.
		}
	 }
}
</script>