Vue 技术点-持续更新

1，select标签结合v-for使用

  <el-select v-model="tem_id"  placeholder="请选择模板" @change="select_t()">
              <el-option v-for="(item,index) in temp_list" 
              :key="index" :label="item.name" :value="item.id"
              ></el-option>
            </el-select>

v-model是select选中的值赋值对象

v-for 是放在option标签中使用，:label是显示的名字，:value真实选中后传递的值

2，如何点击一个按钮，动态增加子组件

比如我们待增加的组件为自定义组件（子组件），comStep

     <comStep v-for="(item,index) in items"
               :key="index"
               :index="index"
               :items="items"
               @uploadData="getData"
               @remove="del"
              ></comStep>

items是定义： items:[{}],

按钮的定义：

          <el-button type="primary"  class="plus-steps-btn" icon="el-icon-plus" size="mini" @click="add()">增加</el-button>

add函数的主要作用就是点击后往里添加添加一个对象

  add(){
        this.items.push({
            id:"",
            name:"",
            desc:"",
            children:[]
        })

   comStep中传入index和items到子组件中：

 :index="index"  :items="items" 

子组件会填入值，填入值就改变了items的内容

在子组件中，定义props来接收这index,items值

  props:{
      index:{
          type:Number,
          required:true
      },
      items:{
          type:Array,
          default:Array
      },

改变值的流程，子组件中监控各输入框的值，值一旦改变，调用uploadData，让父主键去改变items值

子组件中，监测

  data(){
    return {
        step:{
            step_id:"",
            name:"",
            desc:"",
            children:[]
        },
        sub_steps:[

        ] 
    }
  },
  watch:{
       step: {
      handler (newV) {
        if (newV){
         if (newV.name||newV.age) {
           console.log("changed:",newV)
        newV.step_id=this.index
        this.$emit('uploadData', {index: this.index, data: newV})
        }   
        }
           
      },
       deep: true
    },

组件的删除是在子组件发射一个remove操作到父主键中，是删除items中index的数据

remove(){
        this.$emit("removeStep",this.index)
    },

大致的思路就是这样。