请网站建设的人多少钱,显示网站翻页代码,seo关键词推广多少钱,利用ps怎么做网站首页一、什么是组件
组件(Component)是vue.js中很强大的一个功能#xff0c;可以将一些可重用的代码进行封重用。 所有的Vue 组件同时也是Vue 的实例#xff0c;可以接受使用相同的选项对象和提供相同的生命周期钩子。 一句话概括#xff1a;组件就是可以扩展HTML元素#xff…一、什么是组件
组件(Component)是vue.js中很强大的一个功能可以将一些可重用的代码进行封重用。 所有的Vue 组件同时也是Vue 的实例可以接受使用相同的选项对象和提供相同的生命周期钩子。 一句话概括组件就是可以扩展HTML元素封装可重用的HTML代码可以将组件看作自定义的HTML元素。在vue项目中所有.vue结尾的文件都是一个组件
二、定义组件
1、局部组件
引入组件后需要在components对象里进行注册注册后可以直接进行使用
创建qf-button.vue文件
templatedivbutton一个朴实无华的按钮/button/div
/template
创建learn-component文件并引入
templatediv!-- 使用标签语法直接使用组件 --QfButton/QfButton/div
/template
script
import QfButton from ./qf-button.vue;
export default {/*** 在components里注册组件* key 是 组件名 value 是对应的组件*/components: {QfButton,},
};
/script
2、全局组件
全局组件注册后使用时不需要额外的引入可以直接使用
创建qf-input.vue文件
templatedivinput typetext placeholder一个普通的输入框/div
/template
在入口文件处引入
import { createApp } from vue
import ./style.css
import App from ./App.vue
import QfInput from ./qf-input.vueconst app createApp(App)
/*** 使用component方法注册全局组件接收两个参数* 第一个参数 组件的名字* 第二个参数 组件的值*/
app.component(qf-input, QfInput)
app.mount(#app)三、组件传值
1、父传子
在父组件的子组件标签上定义属性子组件使用props接收
父组件传入
templatediv!-- 属性名 是对应的 参数名 --!-- 属性值 是对应的 参数值 --QfButton buttonName按钮名字/QfButton/div
/template
script
import QfButton from ./qf-button.vue;
export default {components: {QfButton,},
};
/script子组件接收
templatediv!-- 可以直接使用 --button{{ buttonName }}/button/div
/templatescript
export default {// 子组件使用props接收/*** props 属性值 可以是一个数组* 数组里存放当前组件接收到的参数* 注意props定义的参数名和父组件传入的参数名必须一致*/// props: [buttonName],/*** props 属性值 可以是一个对象** 对象的key 是 当前组件接收的参数* 对象的value 又是一个对象* 这种方式了解即可*/props: {buttonName: {/** type 接收参数的类型 */type: String,/** required 参数是否必传 */required: false,/** 参数默认值 */default: 默认按钮名,},},
};
/script2、子传父
通过事件传递子组件使用$emit传递一个事件给父组件。$emit第一个参数是事件名第二个参数要传给父组件的参数。父组件在子组件标签上使用接收传过来的事件
qf-input每次输入的时候把输入的内容传给父组件
子组件
templatedivinput inputinputChange typetext placeholder一个普通的输入框 //div
/templatescript
export default {methods: {inputChange(event) {/*** 使用this.$emit方法* 把当前输入的信息传给父组件*//*** 第一个参数是抛出的事件名* 第二个参数是要传给组件的信息 第二个参数可以不传*/this.$emit(componentChange, event.target.value);},},
};
/script父组件
templatediv!-- 属性名 是对应的 参数名 --!-- 属性值 是对应的 参数值 --QfButton a你 b好 :infoinfo/QfButton!-- 使用 接收 子组件抛出的事件并定义触发的函数inputChange 如果不写括号 会自动接收到传入的参数--qf-input componentChangeinputChange/qf-input!-- 如果inputChange 函数 带括号 需要使用$event 拿到传入的参数 --!-- qf-input componentChangeinputChange($event)/qf-input --/div
/template
script
import QfButton from ./qf-button.vue;
export default {components: {QfButton,},methods: {inputChange (msg) {console.log(msg)}}
};
/script
3、祖孙传值
provide / inject 依赖注入
provide可以让我们指定想要提供给后代组件的数据或方法
inject在任何后代组件中接收想要添加在这个组件上的数据或方法不管组件嵌套多深都可以直接拿来用
创建子组件child1.vue、创建孙组件child2.vue 按照等级依次引入
在最上级组件爷爷组价写入
templatedivChild1/Child1/div
/template
script
import Child1 from ./child1.vue;export default {components: {Child1,},/*** 使用provide 统一下发值* provide 是一个函数 函数必须有返回值* 返回的值可以在任意子级组件接收*/provide () {return {msg: 最上级组件传值,handle: this.handle}},methods: {handle (msg) {console.log(触发接收, msg)}}
};
/script孙组件接收child2.vue
templatediv孙组件 ---{{ msg }}/divbutton clickhandle(传入的)1/button
/template
script
export default {// 使用 inject 接收 上级组件统一下发的值inject: [msg, handle],
};
/scriptprovide / inject 使用场景
国际化
主题色切换
祖孙传值
$attrs
多层嵌套组件传递数据时如果只是传递数据而不做中间处理的话就可以用这个比如父组件向孙子组件传递数据时
$attrs包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合然后还要继续传给子组件内部的其他组件就可以通过 v-bind$attrs
爷爷组件
templatedivChild1 handle2handle name来自爷爷的问候/Child1/div
/template
script
import Child1 from ./child1.vue;export default {components: {Child1,},methods: {handle (msg) {console.log(触发接收, msg)}}
};
/script子组件
templatediv子组件!-- 使用 v-bind$attrs 继续往下传--Child2 v-bind$attrs/Child2/div
/templatescript
import Child2 from ./child2.vue;
export default {components: {Child2,},
};
/script孙组件
templatediv孙组件 ---{{ msg }}/div
/template
script
export default {/*** 超纲一点生命周期* 组件创建完成后调用*/created() {/*** 使用 this.$attrs 获取上级组件往下抛的所有的值* 注意这里传入的事件会在事件名前加上on并且驼峰 如 爷爷组件传入的* handle2 在这里变成了onHandle2*/console.log(this.$attrs);},
};
/script4、兄弟组件传值
一般使用状态管理解决
event bus
EventBus 是中央事件总线不管是父子组件兄弟组件跨层级组件等都可以使用它完成通信操作。
在 Vue 3 中由于 Vue 2 中的全局事件总线Vue.prototype.$emit 和 Vue.prototype.$on被移除我们需要使用其他方式来实现类似的功能。在 Vue 3 中可以使用 mitt 这个第三方库来创建一个事件总线。
安装
npm install mitt
使用
在需要使用事件总线的地方导入和创建它
import mitt from mitt;
const eventBus mitt();
发送事件
要发送事件你可以使用 eventBus.emit(eventName, payload) 方法
eventBus.emit(eventName, payload);
监听事件
eventBus.on(eventName, (payload) {// 处理事件的回调逻辑
});
取消监听
eventBus.off(eventName, handler);
