网站区域名是什么意思,电商拿货平台,电脑培训学校能学什么,网站建设的大功效组件#xff08;component#xff09;是vue.js最核心的功能#xff0c;是可扩展的HTML元素。每个页面都是一个HTML。以.vue结尾的文件#xff0c;都可以叫组件。 场景#xff1a;将一个完整的项目#xff0c;拆分成不同的功能模块。 注意#xff1a;组件首字母要大写。 … 组件component是vue.js最核心的功能是可扩展的HTML元素。每个页面都是一个HTML。以.vue结尾的文件都可以叫组件。 场景将一个完整的项目拆分成不同的功能模块。 注意组件首字母要大写。 创建和使用组件
A.组件放在src中的components中
如图
代码显示
// App.vue组件
templatediv classdiv1h3这是App.vue组件/h3/div/templatestyle scoped
.div1{background-color: aqua;
}
/style
B. 导入组件import xxx from xxx
// App.vue组件
templatediv classdiv1h3这是App.vue组件/h3/div/templatescript setup
// 组件已创建好需在App.vue中导入 如下import HelloWorld from ./components/HelloWorld.vue;import TheWelcome from ./components/TheWelcome.vue;
/scriptstyle scoped
.div1{background-color: aqua;
}
/style
C.使用组件
HelloWorld.vue
templateh3子组件HelloWorld/h3
/template
TheWelcome.vue
templatediv classdiv2a href子组件TheWelcome/a/div
/templatestyle scoped
.div2{background-color: yellowgreen;height: 50px;width: 150px;
}
/style App.vue
// App.vue组件
templatediv classdiv1h3这是App.vue组件/h3/div!-- App.vue使用了HelloWorld、TheWelcome组件 --HelloWorld/TheWelcome/
/templatescript setup
// 组件已创建好需在App.vue中导入 如下import HelloWorld from ./components/HelloWorld.vue;import TheWelcome from ./components/TheWelcome.vue;
/scriptstyle scoped
.div1{background-color: aqua;
}
/style 一、父传子
使用props实现父传子通信从父组件传输在子组件接收。父组件通过在子组件标签上绑定v-on自定义属性来传递数据。
App.vue
// App.vue组件
templatediv classdiv1h3这是App.vue组件/h3/div!-- App.vue使用了HelloWorld、TheWelcome组件 --!-- 实验1在父组件中通过v-bind的增强语法向子组件传递普通对象数据 --HelloWorld v-bindpropStudent /!-- 实验2在父组件中通过v-bind的增强语法向子组件传递响应式对象数据 --Swiper v-bindproTeacher/button clickaddTeacherAgeSwiper增加教师年龄/buttonbr!-- 实验3在父组件中通过设置子组件的“字符串型”属性用于向子组件传递字符串数据 --TheWelcome propName王五 propAge90//templatescript setup
import {reactive } from vue;
import HelloWorld from ./components/HelloWorld.vue;
import Swiper from ./components/Swiper.vue;
import TheWelcome from ./components/TheWelcome.vue;
// 实验1const propStudent { // 这里使用const声明了一个名为propStudent的常量propName:张三,propAge:20,}
// 实验2const proTeacher reactive({name:韩梅梅,age:30,})
const addTeacherAge () {proTeacher.age;console.log(教师年龄为${proTeacher.age})
}
/scriptstyle scoped
.div1{background-color: aqua;
}
/style HelloWorld.vue
templateh3子组件HelloWorld/h3
/templatescript setup// 定义对象类型的属性 用于接收上级组件传递过来的对象类型数据 const props defineProps({propName:{type:String // 类型为字符串},propAge:{type:Number, // 类型为数字// 是否必需传值若必须传值却没有传则控制台会给出警告required:true, default:18 // 默认值}, })console.log(props);
/script Swiper.vue script setupconst props defineProps([name,age])console.log(props)
/scriptstyle scoped/style TheWelcome.vue
templateh1子组件TheWelcome/h1
/templatescript setup// props是properties的缩写意思为属性// defineProps定义的属性是提供给外部进行设置使用的// 定义字符串类型的属性用于接收上级组件传递过来的字符串数据 const props defineProps([propName, propAge])console.log(props);
/scriptstyle scoped
.div2{background-color: yellowgreen;height: 50px;width: 150px;
}
/style 二、子传父
子组件通$emit方法触发一个自定义事件父组件在使用子组件标签时监听这个事件来获取数据。
例如在子组件定义一个 emit名称可自定义对象存储自定义事件。在这里定义了两个自定义事件分别是“getPerson”和“addPerson”。再在父组件设置监听事件监听子组件。
App.vue
// 父组件
script setupimport { ref } from vue;import Header from ./components/Header.vue;const person_num ref(1) //初始值为1// 定义emitPrintPerson函数接收一个参数dataconst emitPrintPerson (data) {console.log(下级组件发射过来的数据为: ${data.name} , ${data.age});}const emitAddPersonNum (data) {person_num.value data}
/scripttemplatediv idroot_componenth3我是上级组件/h3h5计算机学院总人数{{ person_num }}/h5!-- 监听两个子组件的事件 --Header v-on:getPersonemitPrintPerson addPersonemitAddPersonNum / /div
/templatestyle scoped#root_component {width: 50%;background-color: antiquewhite;}
/style
Header.vue
script setup/* defineEmits是Vue3的编译时宏函数,用于子组件向父组件发送自定义事件 *///1.用宏函数defineEmits定义一个名为 emits 的对象//名字可以随便取, 用于存储自定义事件//这行代码完成了事件的定义声明告知 Vue 框//架该组件有这两个可以触发并传递数据给父组件的事件。const emits defineEmits([getPerson, addPerson])//2.向上级组件发射名为“getPerson”的自定义事件//并同时发射数据emits(getPerson, { name:李雷, age: 18 })const addPerson () {//3.向父组件发射名为“addPerson”的自定义事件//并同时发射数据emits(addPerson, 1)}
/scripttemplatedivh3我是下级组件/h3!-- 这个按钮绑定了click事件监听器点击时会触发addPerson函数 --button clickaddPerson添加人数/button/div
/templatestyle scopeddiv {width: 50%;background-color: gray;}
/style 三、跨组件通信依赖注入方法
provideinject提供和注入方法
传统组件传值是逐级传递的必须一级一级传递而该方法不用一级一级注入可以使用provide提供数据由inject注入数据。无论层级多深都可以注入由父组件提供给整条链路的依赖。 App.vue
templatediv iddiv1h2跨组件传值依赖注入/h2App.vue brinput v-modelver /div iddiv2Base//div/div
/templatescript setup
// 从App.vue中提供数据
// provide定义提供可使用的数据语法provide(变量名称值)
import { provide } from vue
import Base from ./views/Base.vue
// 定义ver的值
const ver 200;
//在后面的组件中可以通过version取到ver的值
provide(version,ver)
/scriptstyle scoped
#div1{width: 500px;height: 400px;background-color: aquamarine;
}
#div2{width: 200px;height: 100px;background-color: darkcyan;
}
/style
Base.vue
templatedivBase.vueinput v-modelver //div
/templatescript setup
// inject注入父组件provide的变量
//语法如下inject(变量名称可选的默认值)
import { inject } from vueconst ver inject(version)
console.log(ver);/scriptstyle langscss scoped/style
响应式传值 同时Base改变App也会改变。
直接将ver设置为响应式对象其他不用改动。
