.net简单网站开发视频教程网站排名top排行榜
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>