vue特性

1.组件的模块化开发

1.1 组件注册局部

首先在创建一个vue页面作为组件，这里就以分页组件来演示：

<!-- 分页展示 -->
          <el-pagination
            background
            style="margin: 50px auto"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pages.size"
            :current-page="pages.page"
            layout="sizes,prev, pager,next,jumper,total"
            :total="pages.total"
          >
          </el-pagination>
                
        <script>
export default {
    data() {
        return {
        }
    },
    props:['pages'],
    methods: {
        handleSizeChange(val) {
        this.$emit("pageinfo",{"PageChange":this.pages.page,"SizeChange":val})
       
      },
      handleCurrentChange(val) {
         this.$emit("pageinfo",{"PageChange":val,"SizeChange":this.pages.size})
      
      },
    },

}
</script>

 

在主页面组件中的script标签中添加进行注册：

import paging from '分页组件的路径位置'

 

在主页面组件中添加局部组件：

在主页面组件中的钩子下继续添加：

components:{
"my-pasing":pasing
}

 

最后在想添加组件的位置处写上注册组件的标签调用即可：

<my-pasing></my-pasing>

 

1.2 注册全局组件

在main.js文件中进行组件的全局配置：

import paging from '组件的路径位置'
Vue.component('my-paging',paging)

【注：Vue.component('my-paging',paging) 这里面起名字是有要求的】

 

最后在主页面组件中，在想要添加分页组件处调用写上：

<my-pasing></my-pasing>

即注册全局组件完成！

 

2.不同组件间传值

2.1父传子

在父组件：

export default {
    data() {
        return {
        test:"测试",
        }

<my-pasing :name="test"></my-pasing>

在子组件的data下获取父组件传来的值：

props:["name"],

 

 

分页组件父传子：

<my-page :pages="pages" @pageinfo="getData"></my-page>

子组件获取：

props:['pages'],

 

2.2 子传父

子组件绑定数据： this.$emit("绑定的变量供父组件调取",{"PageChange":this.pages.page,"SizeChange":val})

methods: {
        handleSizeChange(val) {
        this.$emit("pageinfo",{"PageChange":this.pages.page,"SizeChange":val})
       
      },
      handleCurrentChange(val) {
         this.$emit("pageinfo",{"PageChange":val,"SizeChange":this.pages.size})
      
      },
}

 

父组件调用取值：@PageChange=“变量”

<!-- 全局分页组件 -->
      <my-page :pages="pages" @pageinfo="getData"></my-page>

方法调用：

 //分页组件
        getData(obj){
            this.pages.page = obj.PageChange
            this.pages.size = obj.SizeChange
            this.info()
        }

 

3. vue功能需要

3.1 修改功能需要

 <el-button size="small" type="warning" @click="update(scope.$index, scope.row)">修改</el-button>

 update(index,row) {
        console.log(row);
        this.form = Object.assign({}, row);
        this.dialogFormVisible = true
      },

 

3.2  循环列表需要

    <el-form-item label="员工部门" prop="dept">
      <el-select v-model="form.deptid">
        <el-option v-for="jk in deptdata" :key="jk" :label="jk.depa" :value="jk.eid"></el-option>
      </el-select>
    </el-form-item>

---

以上便是vue特性中的内容，如有漏缺请在下方留言告知，我会及时补充