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

Vue盲区扫雷

news 2025/3/14 3:11:00

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>

查看全文

http://www.mrgr.cn/news/92972.html