vue组件粗解
通过一个小demo认识一下vue组件的一些功能
一、文件夹src文件夹下找到components文件夹，听名字就知道这是咱们放组件的地方，在该文件夹下新建vue文件Doc.vue
二、打开该文件，template即是html层，script用来写js，style用来写css，我们先在template中用elementui的layout布局写个简单的分栏，代码如下：
<template> <el-row :gutter="10"> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple-light"> <div class="grid-content bg-purple"> </div> </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> </div> </el-col> </el-row> </template> <script> export default { name: "Doc", } </script> <style> .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } </style>
三、打开word.vue文件（要应用组件的页面），引入组件需要三步：
1、script内写上组件文件地址
import Doc from '@/components/Doc.vue' //引入子组件Doc，from后面的地址为组件所在的vue文件地址
2、script的export default中写个components并声明组件，components内的用法看后面的注释
export default { name: "Word", data(){ return{ } }, components: { Doc //这句是Doc:Doc的简写，前面对应的是html里的标签名，后面对应的是子组件定义的名字，如果不需要改变名字可以直接这样写，如果需要改变名字就要写全，并把前面的值改成想要的值，如 Docs：Doc 就把标签名改成了Docs，页面应用该组件的时候就要把标签名改成Docs }, }
3、 template中写上下面这句，其中doc即为组件名
<doc></doc>
运行一下word页面，可以看到组件内的分栏显示了出来
四、往组件内加一些数据看看效果，添加三个属性：word、message、num
1、word页面template内改成下面代码（在刚才的doc标签内加属性与值）
<doc word="文本" message="信息" num="5"></doc>
2、 doc组件script内export default中写data和created，在组件创建时创建数据，具体如下：
data(){ return{ nums: 0 } }, created() { this.nums=this.num //之所以写这个是因为组件内不能修改值，否则会报错，将原本的值赋给组件内新建的值之后并引用就不会报错了 }
3、doc组件script内export default中加个props，具体如下
props:{ //定义的要接收数据的字段（前面是字段名，后面是字段类型，都必填）
word: String,
message: String,
num:{ //这里是因为需要付默认值才这么写，如果不需要的话可以像上面一样写 num:Number
default:0 //给num赋默认值0
,type:Number
},
},
4、doc组件内template的分栏格内用模板语法加数据,具体如下
<template> <el-row :gutter="10"> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> {{word}} </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple-light"> <div class="grid-content bg-purple"> {{message}} </div> </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> <el-button>{{nums}}</el-button> </div> </el-col> </el-row> </template>
现在再运行一下页面，可以看到页面已经有数据了
五、对数据进行操作，看一下功能
1、在doc组件的第三个分栏格内加一个修改按钮和一个重置按钮对数字进行修改和重置，修改template代码如下：
<template> <el-row :gutter="10"> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> {{word}} </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple-light"> <div class="grid-content bg-purple"> {{message}} </div> </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> <el-button>{{nums}}</el-button> <el-button @click="add"> 点击加1 </el-button> <el-button type="prime" @click="changeSomethings" > 重置 </el-button> </div> </el-col> </el-row> </template>
2、doc组件script内exportdefault中写个methods，并写修改和重置方法，具体如下：
methods:{ changeSomethings(){ this.nums=this.num }, add(){ this.nums++; // this.$emit('num') } },
接下来运行一下，点击第二个按钮之后第一个按钮的值加1了，点击第二个按钮之后第一个按钮的值变回了原先的值
到此，整个介绍就结束了，完整代码如下
Word.vue
<template> <div class="about"> <!-- 以下为一个组件，属性为组件中定义的，属性值为组件的值 --> <doc word="文本" message="信息" num="5"></doc> </div> </template> <script> // @ is an alias to /src import Doc from '@/components/Doc.vue' //引入子组件Doc export default { name: "Word", data(){ return{ // num:5 } }, components: { Doc //这句是Doc:Doc的简写，前面对应的是html里的标签名，后面对应的是子组件定义的名字，如果不需要改变名字可以直接这样写，如果需要改变名字就要写全，并把前面的值改成想要的值，如 Docs：Doc 就把标签名改成了Docs，页面应用该组件的时候就要把标签名改成Docs }, methods:{ } } </script> <style scoped> </style>
Doc.vue
<template> <el-row :gutter="10"> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> {{word}} </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple-light"> <div class="grid-content bg-purple"> {{message}} </div> </div> </el-col> <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <div class="grid-content bg-purple"> <el-button>{{nums}}</el-button> <!-- <el-button>{{addNum}}</el-button>--> <el-button @click="add"> 点击加1 </el-button> <el-button type="prime" @click="changeSomethings" > 重置 </el-button> </div> </el-col> </el-row> </template> <script> export default { name: "Doc", data(){ return{ // num1: 0, // num2: 0, nums: 0 } }, props:{ //定义的要接收数据的字段（前面是字段名，后面是字段类型，都必填） word: String, message: String, num:{ default:0 //给num赋默认值0 ,type:Number }, }, // computed:{ //计算函数，复杂的计算都应该放在这里，尽量不要直接在模板语法里面计算，在此处计算的值是会动态变的，即计算的数中有一个值变了，最终结果也会跟着变，类似于封装的计算函数 // addNum:function(){ //addnum可以直接在模板语法里面用，相当于data内的值 // return this.num + this.num1 + this.num2; // } // }, methods:{ changeSomethings(){ this.nums=this.num }, add(){ this.nums++; // this.$emit('num') } }, created() { this.nums=this.num } } </script> <style> .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } </style>
