【Vue】日常小知识总结（持续更新）

逃离我推掉我的手 2024-02-18 09:53 25阅读 0赞

**目录**

【K】props默认值类型有哪些

【K】点击父组件，刷新子组件

方法1：使用Key属性

代码1

代码2

方法2：使用事件

父组件:

子组件:

方法3：使用Vuex

父组件:

子组件:

【K】选中时间段后调用方法

1、在与methods平级的位置定义一个watch

2、在watch对象中写一个函数

【K】dialog打开时重新渲染

【K】dialog里加一条直线

方法1

方法2

【K】el-table 单元格插入按钮组el-radio-group

【K】页面跳转传递对象

【K】使用 \`setInterval\` 函数来周期性地调用一个方法

【K】属性前面加不加:的区别

【K】element-plus 字体变色之cell-style

方法之cell-style

1 、cell-style

2 、表格绑定cell-style属性

3 、数据操作

方法之el-tag

1 、el-table-column

2、方法eachColor()\{\}

【K】动态给id设置style样式

代码

1、监听字段

2、动态计算，达到条件后改变字体颜色

--------------------

### 【K】props默认值类型有哪些 ###

**[【Vue】props默认值类型有哪些][Vue_props]**

### 【K】点击父组件，刷新子组件 ###

编辑页面, 有个新增, 有个历史记录, 
    但是历史记录是引用的子组件, 
    所以需要添加之后对子组件的值进行刷新

#### 方法1：使用Key属性 ####

你可以通过改变子组件的\`key\`属性来强制重新渲染子组件。当key发生变化时，Vue会重新创建组件实例。

##### 代码1 #####

<template>
      <div>
        <button @click="refreshChild">刷新子组件</button>
        <ChildComponent :key="componentKey" />
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
      components: {
        ChildComponent
      },
      data() {
        return {
          componentKey: 0
        };
      },
      methods: {
        refreshChild() {
          this.componentKey += 1; // 改变key值，重新渲染子组件
        }
      }
    };
    </script>

##### 代码2 #####

<template>
      <div class="pageContainer">
        <el-button type="primary" @click="handleCreate">
          创建
        </el-button>
        <Child :key="timer"></Child>
      </div>
    </template>
    import Child from "@/components/child";
    components: {
        Child 
      },
      data() {
        return {
              timer:null
            }
          },
      methods: {
        handleCreate() {
           this.timer = new Date().getTime();
          // 也可以处理其他事件
        },
    }

#### 方法2：使用事件 ####

父组件可以发出一个事件，子组件在\`created\`或\`mounted\`钩子中监听这个事件来执行刷新操作。

##### 父组件: #####

<template>
      <div>
        <button @click="refreshChild">刷新子组件</button>
        <ChildComponent ref="childComponent" />
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
      components: {
        ChildComponent
      },
      methods: {
        refreshChild() {
          this.$refs.childComponent.refresh(); // 调用子组件的方法
        }
      }
    };
    </script>

##### 子组件: #####

#### 方法3：使用Vuex ####

如果你使用Vuex进行状态管理，可以在父组件中提交一个mutation或action来改变状态，然后在子组件中使用计算属性或watcher来响应状态的变化，从而刷新数据。

const store = new Vuex.Store({
      state: {
        refreshFlag: false
      },
      mutations: {
        toggleRefreshFlag(state) {
          state.refreshFlag = !state.refreshFlag;
        }
      }
    });

##### 父组件: #####

<template>
      <div>
        <button @click="refreshChild">刷新子组件</button>
        <ChildComponent />
      </div>
    </template>
    
    <script>
    import { mapMutations } from 'vuex';
    
    export default {
      methods: {
        ...mapMutations([
          'toggleRefreshFlag' // 映射 this.toggleRefreshFlag() 为 this.$store.commit('toggleRefreshFlag')
        ]),
        refreshChild() {
          this.toggleRefreshFlag();
        }
      }
    };
    </script>

##### 子组件: #####

<template>
      
    </template>
    
    <script>
    import { mapState } from 'vuex';
    
    export default {
      computed: {
        ...mapState([
          'refreshFlag'
        ]),
        watch: {
          refreshFlag() {
            // 当refreshFlag变化时，执行刷新操作
            this.refresh();
          }
        }
      },
      methods: {
        refresh() {
          // 执行刷新操作
        }
      }
    };
    </script>

这些方法各有优劣，具体使用哪一种取决于你的应用场景和个人偏好。使用\`key\`属性是最直接的方法，而使用事件或Vuex可以提供更细粒度的控制。

### 【K】选中时间段后调用方法 ###

页面设计没有查询按钮， 所以需要用时间范围选择后调用接口，
     一开始使用的是pickerOptions对象中 onPick（）方法， 
    后来调试发现触发方法的时机不是想要的， 
    后来想想还是watch直接监听吧...

#### 1、在与methods平级的位置定义一个watch ####

watch:{
    
    },
    methods:{}

#### 2、在watch对象中写一个函数 ####

函数的名称为需要监测的数据名称。该函数支持返回两个值，第一个为变化后的数据，第二个为变化前的数据。

这里监听的dateRange是个数组, 所以当选中的值有两个的时候会调用对应方法.

watch:{
    dataRange(to,do){
        if(to.length>1)
            this.method1();
        }
    },
    
    methods:{}

### 【K】dialog打开时重新渲染 ###

在 Vue 中打开 dialog 常用的方法是使用 el-dialog 控件。当 dialog 打开时，常常需要重新渲染对应的内容。这个功能可以通过监听 visible 属性实现。

具体实现方法如下：

在 el-dialog 控件上监听 visible 属性

<template>
          <el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange">
            
          </el-dialog>
        </template>
         
        <script>
        export default {
          data() {
            return {
              dialogVisible: false
            };
          },
          methods: {
            handleVisibleChange(visible) {
              if (visible) {
                // 对话框打开时进行重新渲染
              }
            }
          }
        };
        </script>

在 handleVisibleChange 方法中实现重新渲染的逻辑

下面是一个渲染当前时间的示例代码：

<template>
          <el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange">
            <p>当前时间是：{
       { currentTime }}</p>
          </el-dialog>
        </template>
         
        <script>
        export default {
          data() {
            return {
              dialogVisible: false,
              currentTime: null
            };
          },
          methods: {
            handleVisibleChange(visible) {
              if (visible) {
                this.currentTime = new Date().toLocaleString();
              }
            }
          }
        };
        </script>

在这个例子中，当 dialog 显示时，handleVisibleChange 方法将重新渲染并更新 currentTime 的值。

需要注意的是，当 dialog 打开后，如果需要再次重新渲染对话框内容，handleVisibleChange 方法可能会被多次调用。如果重新渲染逻辑非常耗时，可能会造成性能问题。因此，建议在实现重新渲染逻辑时，尽可能避免出现问题。

### 【K】dialog里加一条直线 ###

#### 方法1 ####

.balaLine {
    
    width: 800px;
    
    height: 10px;
    
    background: rgba(0, 0, 0, 0.06);
    
    }

#### 方法2 ####

// dialog标题下加一条线
    .el-dialog__header {
      border-bottom: 1px solid #eee;
    }
     
    // dialog标题黑色
    .el-dialog__title {
      font-weight: bold;
      color: #000;
    }

### 【K】el-table 单元格插入按钮组el-radio-group ###

要在Vue的Element UI库的el-table单元格中插入按钮组el-radio-group，需要使用scoped slot功能，通过插入自定义内容在el-table中添加按钮组el-radio-group。

以下是一个简单的示例代码，展示了如何在el-table单元格中插入el-radio-group按钮组：

<template>
          <el-table :data="tableData">
            <el-table-column prop="name" label="Name"></el-table-column>
            <el-table-column label="Status">
              <template slot-scope="scope">
                <el-radio-group v-model="statusArr">
                  <el-radio label="1">R1</el-radio>
                  <el-radio label="2">R2</el-radio>
                  <el-radio label="3">R3</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>
        </template>
         
        <script>
        export default {
          data() {
            statusArr:[],
            return {
              tableData: [
                { name: 'John', status: '1' },
                { name: 'Jane', status: '2' },
                { name: 'Bob', status: '3' }
              ]
            };
          }
        };
        </script>

在此示例中，我们使用了el-table的scoped slot功能，将自定义内容插入到el-table-column中的单元格中。在自定义内容中，我们添加了el-radio-group组件，并将其绑定到对应列的数据属性上。对于每行数据，我们都可以通过el-radio-group选择不同的状态。

请注意，我们在右侧的el-table-column元素中使用了label属性来添加表头标签。这使得代码更容易阅读和理解数据表格的内容。

**扩展**

//前端回显
        this.statusArr = this.statusStr.split(",");
        //转换为字符串传到后台
        this.statusStr = this.statusArr.join(",");

### 【K】页面跳转传递对象 ###

在Vue中传递对象可以通过路由参数进行传递。可以使用$route对象，里面有许多属性，包含的信息包括页面路径（path）、参数（params）等。

以下是在Vue中实现页面跳转传递对象的示例代码：

在跳转之前，将需要传递的对象序列化成字符串，并设置为路由参数params的值：

在接收页面，通过$route对象获取路由参数params，并将其解码并反序列化以获取原始对象：

mounted() {
      let encodedObj = this.$route.params.myObj;
      let obj = JSON.parse(atob(encodedObj)); // 解码并反序列化对象
      console.log(obj); // { name: "John", age: 30 }
    }

这里使用了JavaScript内置的\`btoa()\`和\`atob()\`函数对对象进行序列化并编码和解码。

注意，这种方法可以用于在Vue应用程序的不同页面之间传递简单的JSON格式对象。对于更复杂的对象，可能需要更多的处理和验证，以确保跨页面正确传递数据。

### 【K】使用 \`setInterval\` 函数来周期性地调用一个方法 ###

在 Vue 中，可以使用 \`setInterval\` 函数来周期性地调用一个方法。以下是一个简单的例子：

<template>
          <div>
            <h1>{
       { counter }}</h1>
          </div>
        </template>
         
        <script>
        export default {
          data() {
            return {
              counter: 0
            };
          },
          mounted() {
            setInterval(this.incrementCounter, 1000); // 每1000毫秒（即1秒）调用incrementCounter方法
          },
          methods: {
            incrementCounter() {
              this.counter++;
            }
          }
        };
        </script>

在上面的例子中，我们使用了 \`mounted\` 钩子函数来在组件挂载后调用 \`setInterval\` 函数。\`setInterval\` 函数会每隔一段时间调用 \`incrementCounter\` 方法，这里设置为每隔1秒钟。

\`incrementCounter\` 方法将 \`counter\` 的值自增1。每次调用该方法时，Vue会自动更新模板上 \`counter\` 绑定的文本内容。这样，每隔一段时间就会更新一次 \`counter\` 的值，从而实现周期性的调用方法。

### 【K】属性前面加不加:的区别 ###

> 在 Vue 中，使用 \`:\` 冒号可以方便地进行数据绑定，以动态地将数据绑定到元素的属性上。在属性前添加了 \`:\` 号后，Vue 会将该属性作为 JavaScript 表达式来处理，它所绑定的 DOM 属性的值将会评估为绑定表达式的计算结果。

例如，如果我们要把 Vue 组件中的 \`myMessage\` 的值用到 HTML 模板中，则使用 \`:\` 冒号进行数据绑定：

<template>
      <div>{
       { myMessage }}</div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          myMessage: "Hello, World!"
        };
      }
    };
    </script>

在上述代码中，\`\{ \{ myMessage \}\}\` 会被解析为字符串 \`"Hello, World!"\` 并呈现在组件的 DOM 中。此时，如果没有使用 \`:\` 冒号进行数据绑定，模板中将只会显示其字面值，如下所示：

<template>
      <div>myMessage</div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          myMessage: "Hello, World!"
        };
      }
    };
    </script>

上述代码中，模板中的字符串仅仅只是一个常量，并不能动态显示所要绑定的数据。

因此，在 Vue 中，如果要通过变量的动态值来更新属性，我们通常需要在属性名前面加上 \`:\` 冒号符号，它会将所绑定的值作为一个表达式的计算结果进行处理，最终将它的值写入目标 DOM 元素的属性中。

需要注意的是，使用 \`:\` 冒号符号进行动态绑定的属性名也必须是合法的 JavaScript 表达式。例如，以下代码将更新按钮的 \`disabled\` 属性：

<template>
      <button :disabled="count > 10">Click Me</button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          count: 0
        };
      }
    };
    </script>

在上述代码中，当 \`count\` 的值大于 10 时，按钮的 \`disabled\` 属性将会被更新为 \`true\`，按钮将被禁用。

总之，使用 \`:\` 冒号符号进行动态绑定的属性和表达式将会作为 Vue 组件的一部分进行解析和处理。这样可以实现更加灵活和动态的数据绑定。

### 【K】element-plus 字体变色之cell-style ###

根据列表列值的不同显示不同颜色

#### 方法之cell-style ####

##### 1 、cell-style #####

<table> 
 <tbody> 
  <tr> 
   <td><strong>cell-style</strong></td> 
   <td><strong>单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。</strong></td> 
   <td><strong>Function({row, column, rowIndex, columnIndex})/Object</strong></td> 
  </tr> 
 </tbody> 
</table>

*  row:当前行
 *  columnIndex: 列下标

##### 2 、表格绑定cell-style属性 #####

<el-table
              :data="tableData"
              :row-style="rowState"
              :cell-style="cellStyle"
              style="width: 100%"
            >

##### 3 、数据操作 #####

const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
      // 状态列字体颜色
      if (row.level >2 && columnIndex === 8) {
            return {'color': 'red'}; //方法1
            return "color: #FF0000"; //方法2
        }
    }

#### 方法之el-tag ####

##### 1 、el-table-column #####

<el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
              <el-tag :type="eachColor(scope.row.level)">{
       {
                scope.row.level
              }}</el-tag>
            </el-popover>
          </template>
        </el-table-column>

##### 2、方法eachColor()\{\} #####

eachColor(level) {
          if (level == "5") {
            return "danger";
          }
          if (level == "4") {
            return "warning";
          }
          if (level == "3") {
            return "info";
          }
          ...
        },

![e958b6f86c0144cf923d4e6d5295707f.png][]

### 【K】动态给id设置style样式 ###

有个需求需要动态控制数字的颜色，监听之，然后设置对应颜色

#### 代码 ####

##### 1、监听字段 #####

watch:{
        taskNum(to,do){
            if(to!=do)
                this.check();
            }
        },
     
    methods:{
        check（）{
        
        },
    }

##### 2、动态计算，达到条件后改变字体颜色 #####

var d = document.getElementById("taskNum");
    d.style.color="#808080";
    d.style.width="20%";
    d.style.left= "35%";

**有用请点赞，养成良好习惯！**

**疑问、交流、鼓励请留言！**

[Vue_props]: https://blog.csdn.net/libusi001/article/details/131569237
[e958b6f86c0144cf923d4e6d5295707f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/acbb60bd4e9f464eb2a3f0a17573ec18.png