vue相关知识点随记

vue随记

1． 计算属性中定义的方法里面包括get和set方法，get方法根据其他属性值动态计算当前属性值，set方法监视当前属性变化，更新其他属性值

2． vue2和vue3 – 父子组件中，子组件不能直接修改父组件的值，需要通过$emit方法修改父组件的值；子组件通过props接受父组件的属性，父组件修改时，子组件对应自动修改
如果父组件给子组件传递参数是:success绑定的方法 ，子组件只能使用this.success(), 不能使用this.$emit('success')。
如果父组件给子组件传递参数是@success绑定的方法 ，子组件只能使用this.$emit('success'), 不能使用this.success()。

总结：vue2和vue3

1、冒号传递的无论是方法还是属性（本质是属性），都只能使用this.直接访问，不能使用this.$emit访问

2、@传递的方法（@符号用于监听子组件发出的事件），只能使用this.$emit访问，不能使用this.直接访问

3、子组件的任何方法（包括一个方法中有调用父组件的方法），传递给父组件后，父组件也能直接使用

     // 示例是vue2,vue3有同样的效果
    // 父组件
    <ChildVue :success="getSuccess" @success2="chanSuccess"></ChildVue>
     getSuccess(success){
      if(success){
        success();
      }
      console.log('父组件1被调用啦')
    },
     chanSuccess(){
      console.log('父组件2被调用啦')
    }
    // 子组件
   <el-button @click="parMeHandle">点击调用父组件方法</el-button>
  <el-button @click="parMeHandle2">按钮</el-button>
    props:['success','success2'],
    onhhh(){
      this.success()
      console.log('子组件被调用啦');
    },
     parMeHandle(){
        this.success();
        this.success(this.onhhh) //跟下面写法效果一样
        this.success(this.onhhh())//跟上面写法效果一样
      // this.$emit('success') // 报错
       console.log('子组件被调用啦');
    },
    parMeHandle2(){
      //this.success2(); // 报错
      this.$emit('success2')
      // this.$emit('success2',this.onhhh) //有参数时
      console.log('子组件2被调用啦');
    }

3． **computed计算属性，methods方法，watch监听区别：**这三者都可以定义方法，methods定义普通方法，watch在监听经常变化的属性时使用，computed只在相关的响应式依赖发生改时，计算属性才会重新求值，减少不必要的计算

4． 组件的使用，父组件通过$refs 调用子组件

5． 添加数据，使用插槽slot, slot-scope="text, record, index"三个参数分别为当前行的值，当前行数据，行索引，使用这些可以快速获取数据并使用

6． 在转化时间格式时，表单不会自动转化，需要手动转化，使用Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象，使用此属性来转化时间格式，不修改原有数据

7． 使用filter(item=>item.name.indexOf(this.searchText)>-1) 实现模糊查询

8． Vue-cli（vue脚手架）在配置时可以选择性添加路由等，而且运行时不需要手动更改ip,会自动生成

9． 在使用vue create antd-demo 创建项目时，可选择性配置自定义文件

10． 在提交日期格式的数据时，需要转化数据格式，提交时把日期格式转化为字符串格式使用：
moment(time).format('YYYY-MM-DD HH:mm:ss'),当需要获取数据时把字符串格式转为时间格式使用：moment(time, 'YYYY-MM-DD HH:mm:ss')

11． Record中包含一条数据中的所有属性，record.属性名 的方法可以获取属性值

12． Form表单，渲染数据时使用this.$nextTick( () => { this.form.setFieldsValue({name：“”"})});将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用它，然后等待DOM更新

13． SetFieldsValue()设置表单值，resetFields()重置表单值，在给表单赋值时，表单必须是可视的，而且赋值的数据要一一匹配field，用不到的不要赋值即可

14． 在查询之后不能把数据直接删除，需要保存完整数据以供下次查询