当前位置：首页 > news >正文

Vue盲区扫雷

news 来源：原创 2025/5/1 23:23:19

1、动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component :is="item.componentName" v-for="(item,index) in parentNode.childrenNode" :key="index" :parent-node="item" />

在上述示例中，currentTabComponent 可以包括

已注册组件的名字，或一个组件的选项对象

:parent-node="item"：将当前遍历到的 item 对象作为数据传递给动态渲染的组件的 parent-node 属性。这样在被渲染的组件内部，就可以通过 props 来接收这个 parent-node 属性的值并使用。

子组件接收 `parent-node` 属性

以下是一个子组件接收 parent-node 属性的示例：

<template> 
  <div> 
    <!-- 显示接收到的 someData 数据 --> 
    <p>{{ parentNode.someData  }}</p> 
  </div> 
</template> 
 
<script> 
export default { 
  props: { 
    parentNode: { 
      type: Object, 
      required: true 
    } 
  } 
}; 
</script>

在这个子组件中，通过props选项定义了parent-node属性，其类型为对象且是必需的。在模板中，就可以使用 parentNode.someData来显示接收到的数据。

`2、inject` 语法的具体含义

inject 是 Vue 组件选项中的一部分，用于在当前组件中接收上级组件（不一定是直接父组件）通过 provide 选项提供的数据或方法。inject: ['superParams'] 这种写法是 inject 的数组语法，其含义如下：

数组元素：数组中的每一项都是一个字符串，代表要注入的属性名。在这个例子中，'superParams' 就是要注入的属性名。当前组件期望从上级组件获取名为 superParams 的数据或方法。
数据来源：superParams 这个属性需要由上级组件通过 provide 选项提供。provide 选项可以在组件中定义一个对象，该对象的属性和值会被提供给所有下级组件，供它们使用 inject 来注入。

在这个示例中，父组件通过 provide 提供了 superParams 属性，子组件通过 inject 注入了这个属性，从而可以在模板中使用 superParams 的值。

<!-- 父组件 --> 
<template> 
  <div> 
    <child-component></child-component> 
  </div> 
</template> 
 
<script> 
import ChildComponent from './ChildComponent.vue';  
 
export default { 
  provide: { 
    superParams: '这是从父组件传递下来的数据' 
  }, 
  components: { 
    ChildComponent 
  } 
}; 
</script> 
 
<!-- 子组件 --> 
<template> 
  <div> 
    <p>{{ superParams }}</p> 
  </div> 
</template> 
 
<script> 
export default { 
  inject: ['superParams'] 
}; 
</script> 


<!-- 在对象语法中，可以通过 default 选项为注入的属性设置默认值，当上级组件没有提供该属性时，就会使用默认值--> 
export default { 
  inject: { 
    superParams: { 
      default: '默认值' 
    } 
  } 
};

3、`Vue.directive` 用来创建全局自定义指令

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Vue 2 Custom Directive</title> 
  <!-- 引入 Vue 2 库 --> 
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>   
</head> 
 
<body> 
  <div id="app"> 
    <!-- 使用自定义指令 v-focus --> 
    <input v-focus type="text"> 
  </div> 
  <script> 
    // 定义全局自定义指令 v-focus 
    Vue.directive('focus',  {
      // 当被绑定的元素插入到 DOM 中时
      inserted: function (el) {
        // 聚焦元素
        el.focus(); 
      }
    });

    // 创建 Vue 2 实例
    new Vue({
      el: '#app'
    });
  </script> 
</body> 
 
</html>

代码解释

Vue.directive('focus', {...})：创建一个名为 v-focus 的全局自定义指令。
inserted 钩子函数：当指令绑定的元素插入到 DOM 中时触发，在这个钩子函数里使用 el.focus() 让元素获取焦点。


<!-- 输入验证：对输入框的内容进行实时验证，例如限制输入长度、只允许输入数字等 -->
<template> 
  <input v-numeric-only /> 
</template> 
 
<script> 
export default { 
//directives：用来定义组件内部的局部指令。这些指令仅在当前组件中可用。
  directives: { 
    'numeric-only': { 
      bind: function (el) { 
        el.addEventListener('input',  function (e) { 
          const value = e.target.value  
          e.target.value  = value.replace(/[^\d]/g,  '') 
        }) 
      } 
    } 
  } 
} 
</script>