组件创建、多级组件、组件传值、组件父子交互、插槽
App.vue<template> <div>123</div> <hello>自定义标签</hello> <OneOne></OneOne> <!-- <two></two> --> <!-- 3组件传值 --> <OneOne title="热门课程"></OneOne> <!-- 4、 动态绑定 增加冒号可以动态传值，值可以动态绑定 --> <OneOne :title="title"></OneOne> <!-- 4.2 多个传值 - 传值的 key {title arr}-> --> <OneOne :title="title" :arr="arr"></OneOne> <hr> <!-- 组件向页面传值 --> <!-- fun5 跟引入组件事件名称一致 --> <three @fun5 = "fun4"></three> <div>{{sc_sum}}</div> <hr> <!-- 多组件 多层相互访问 --> <!-- <four></four> --> <two>哈哈</two> <hr> <five> <a href="http://www.baidu.com">跳转页面</a> </five> <five> <img style="width:200px;" src="https://img1.baidu.com/it/u=2218815005,3124653454&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""> </five> <five> <template #img> <img src="https://img1.baidu.com/it/u=2204132179,643663242&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" alt=""> </template> </five> <five> <!-- v-slot:img2 语法糖 #img2 --> <template #img2> <a href="http://www.baidu.com">你好</a> </template> </five></template><script>// 组件导入。哪个页面使用哪个页面导入// import from 格式// 名称 路径// import moduleName from 'module';// import HelloWorld from './components/HelloWorld.vue'import hello from "./components/HelloWorld";// import One from './components/One.vue';import OneOne from "./components/OneOne";import Two from "./components/Two.vue"// import Three from './components/Three.vue';// import two from './components/Two.vue';import three from "./components/Three.vue";// import Four from "./components/Four.vue";import Five from "./components/Five.vue";import Four from './components/Four.vue';export default { components: { // 后面的值是引入的文件 // 前面的lkey是给这个文件下标的名称 hello: hello, OneOne: OneOne, three:three, Two:Two, Five:Five, Four, // Four:Four, // two:two }, data() { return { arr :{ lh : "小蛇", hui : "小龙", }, titel : "www.baidu.com", sc_sum:0, php:"百度", } }, methods: { fun4(e){ this.sc_sum =this.sc_sum+ 2; }, fun3(){ console.log("这是方法三"); }, fun5(){ console.log("这是方法5"); }, }, beforeCreate() { console.log("1在创建组件之前调用"); }, created() { console.log("2组件创建完成调用"); }, beforeMount() { console.log("3模版挂载之前调用"); }, mounted() { console.log("4模版挂载完成调用"); }, // name: 'App', // components: { // HelloWorld // }};</script><style scoped >/* scoped 防止样式穿透 */div { color: aqua;}</style>
components/OneOne.vue<template> <div> <div style="font-size:30px;color:red;">{{title}}</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <!-- <two></two> --> <ul> <!-- 4、v-for 循环，有红色的波浪纹，是因为没有key，唯一标识 --> <!-- key 的值，要不一样，直接输入字符串，它还是一样的，把它变成变量 --> <li v-for="(v,key,index) in arr ">{{v}}</li> <!-- 所以 --> <li v-for="(v,key,index) in arr" :key="key">{{v}}</li> <li v-for="(v,key,index) in arr" :key="index">{{v}}</li> </ul> </div></template><script>// 2、引入组件// import two from "./Two.vue";export default { comments: { // two }, data() { return { } },// 3、组件传值 组件数据交互// 3.3 组件接收传值的时候，接收的是key的值// props:["title","arr"]// 5可以配置传值的数据props : { title:{ type :String, required : true, default : "www.baidu.com" }, arr : { type : Array, }},methods: { one (){ }},};</script><style></style>
components/Two.vue<template> <four></four></template><script>import Four from "./Four.vue";export default { components: {Four:Four, },}</script>
components/Three.vue<template> <button @click="add()">增加余额</button></template><script>export default { methods: { add(){// 使用 $emit 方法，调用父文件的方法(https://v3.cn.vuejs.org/api/instance-methods.html#emit)// 所有子传父，都是通过事件传过去的 click传到add add到fun5 fun5 传到@fun5 fun5到fun4 1传 到e this.$emit('fun5',1); } },}</script>
components/Four.vue<template><!-- <button @click="fun">执行方法引入上一层</button> --><button @click="fun2">执行方法引入上一层</button></template><script>export default { methods: { fun () { // 代表上一层 子组件调用父组件的方法：$parent this.$parent.fun3(); }, fun2(){ 代表上一层 this.$parent.$parent.fun5(); } },}</script>
components/Five.vue<template><!-- 插槽 slot --> <div> <ul> <li>样式穿透</li> </ul> <slot></slot> <!-- 到这里可以是其他的模块，图片，文本，需要自定义，因为每个用组件的地方，可能不一样 --> <!-- 插槽可以实现组件的扩展性，抽取共性，保留不同插槽就相当于函数的传值官网：https://v3.cn.vuejs.org/guide/component-slots.html --> <!-- <slot></slot> --> <!-- <slot></slot> --> <!-- 如果2个插槽没有名字，传一次值，这2个插槽都要显示 --> <slot name="img"></slot> <slot name="img2" :php ="php"></slot> </div></template><script>export default { php:"百度",}</script><style scoped>div{ color: brown;}</style>
路由
App.vue<template> <!-- app.vue页面没有刷新，刷新的是router-view 标签里的内容 --> <router-view></router-view> <router-link to="/">我是首页</router-link>| <router-link to="/lists">我是列表</router-link>| <router-link to="/course">我是课程</router-link>| <router-link to="/user">我是用户</router-link>|</template><script>export default {}</script>
router/index// hash模式：createWebHashHistory// import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'import { createRouter, createWebHistory } from 'vue-router'// 我们要想给页面 增加路由管理，就需要把页面引入进来// import 引入页面文件，也可以用方法来引入// / 代表根目录，根页面import HomeView from '../views/HomeView.vue'import Index from '../views/Index.vue'import User from '../views/User.vue'import Course from '../views/Course.vue'import Lists from '../views/Lists.vue'const routes = [ // { // path: '/', // name: 'home', // component: HomeView // }, // { // path: '/about', // name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') // }, { path: '/', // 路由地址配置，就是浏览器上的url name: 'index', // 是页面的名称，自定义，但是不要重复 component: Index // 这个是页面文件的路径 }, { path: '/lists', // 列表页面 name: 'lists', // 是页面的名称，自定义，但是不要重复 component: Lists // 这个是页面文件的路径 }, { path: '/course', // 课程页面 name: 'course', // 是页面的名称，自定义，但是不要重复 component: Course // 这个是页面文件的路径 }, { path: '/user', // 用户页面 name: 'user', // 是页面的名称，自定义，但是不要重复 component: User // 这个是页面文件的路径 }]const router = createRouter({ // hash模式：createWebHashHistory // 访问路径就会多个#号 localhost:8080/#/user、localhost:8080/#/course history: createWebHistory(process.env.BASE_URL), routes})// 导出路由export default router
