Blogger Information
Blog 46
fans 2
comment 0
visits 19464
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1、组件创建、多级组件、组件传值、组件父子交互、插槽 4、路由
P粉314265155
Original
691 people have browsed it

组件创建、多级组件、组件传值、组件父子交互、插槽

  1. App.vue
  2. <template>
  3. <div>123</div>
  4. <hello>自定义标签</hello>
  5. <OneOne></OneOne>
  6. <!-- <two></two> -->
  7. <!-- 3组件传值 -->
  8. <OneOne title="热门课程"></OneOne>
  9. <!-- 4 动态绑定 增加冒号可以动态传值,值可以动态绑定 -->
  10. <OneOne :title="title"></OneOne>
  11. <!-- 4.2 多个传值 - 传值的 key {title arr}-> -->
  12. <OneOne :title="title" :arr="arr"></OneOne>
  13. <hr>
  14. <!-- 组件向页面传值 -->
  15. <!-- fun5 跟引入组件事件名称一致 -->
  16. <three @fun5 = "fun4"></three>
  17. <div>{{sc_sum}}</div>
  18. <hr>
  19. <!-- 多组件 多层相互访问 -->
  20. <!-- <four></four> -->
  21. <two>哈哈</two>
  22. <hr>
  23. <five>
  24. <a href="http://www.baidu.com">跳转页面</a>
  25. </five>
  26. <five>
  27. <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="">
  28. </five>
  29. <five>
  30. <template #img>
  31. <img src="https://img1.baidu.com/it/u=2204132179,643663242&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" alt="">
  32. </template>
  33. </five>
  34. <five>
  35. <!-- v-slot:img2 语法糖 #img2 -->
  36. <template #img2>
  37. <a href="http://www.baidu.com">你好</a>
  38. </template>
  39. </five>
  40. </template>
  41. <script>
  42. // 组件导入。哪个页面使用哪个页面导入
  43. // import from 格式
  44. // 名称 路径
  45. // import moduleName from 'module';
  46. // import HelloWorld from './components/HelloWorld.vue'
  47. import hello from "./components/HelloWorld";
  48. // import One from './components/One.vue';
  49. import OneOne from "./components/OneOne";
  50. import Two from "./components/Two.vue"
  51. // import Three from './components/Three.vue';
  52. // import two from './components/Two.vue';
  53. import three from "./components/Three.vue";
  54. // import Four from "./components/Four.vue";
  55. import Five from "./components/Five.vue";
  56. import Four from './components/Four.vue';
  57. export default {
  58. components: {
  59. // 后面的值是引入的文件
  60. // 前面的lkey是给这个文件下标的名称
  61. hello: hello,
  62. OneOne: OneOne,
  63. three:three,
  64. Two:Two,
  65. Five:Five,
  66. Four,
  67. // Four:Four,
  68. // two:two
  69. },
  70. data() {
  71. return {
  72. arr :{
  73. lh : "小蛇",
  74. hui : "小龙",
  75. },
  76. titel : "www.baidu.com",
  77. sc_sum:0,
  78. php:"百度",
  79. }
  80. },
  81. methods: {
  82. fun4(e){
  83. this.sc_sum =this.sc_sum+ 2;
  84. },
  85. fun3(){
  86. console.log("这是方法三");
  87. },
  88. fun5(){
  89. console.log("这是方法5");
  90. },
  91. },
  92. beforeCreate() {
  93. console.log("1在创建组件之前调用");
  94. },
  95. created() {
  96. console.log("2组件创建完成调用");
  97. },
  98. beforeMount() {
  99. console.log("3模版挂载之前调用");
  100. },
  101. mounted() {
  102. console.log("4模版挂载完成调用");
  103. },
  104. // name: 'App',
  105. // components: {
  106. // HelloWorld
  107. // }
  108. };
  109. </script>
  110. <style scoped >
  111. /* scoped 防止样式穿透 */
  112. div {
  113. color: aqua;
  114. }
  115. </style>
  1. components/OneOne.vue
  2. <template>
  3. <div>
  4. <div style="font-size:30px;color:red;">{{title}}</div>
  5. <ul>
  6. <li>1</li>
  7. <li>2</li>
  8. <li>3</li>
  9. </ul>
  10. <!-- <two></two> -->
  11. <ul>
  12. <!-- 4v-for 循环,有红色的波浪纹,是因为没有key,唯一标识 -->
  13. <!-- key 的值,要不一样,直接输入字符串,它还是一样的,把它变成变量 -->
  14. <li v-for="(v,key,index) in arr ">{{v}}</li>
  15. <!-- 所以 -->
  16. <li v-for="(v,key,index) in arr" :key="key">{{v}}</li>
  17. <li v-for="(v,key,index) in arr" :key="index">{{v}}</li>
  18. </ul>
  19. </div>
  20. </template>
  21. <script>
  22. // 2、引入组件
  23. // import two from "./Two.vue";
  24. export default {
  25. comments: {
  26. // two
  27. },
  28. data() {
  29. return {
  30. }
  31. },
  32. // 3、组件传值 组件数据交互
  33. // 3.3 组件接收传值的时候,接收的是key的值
  34. // props:["title","arr"]
  35. // 5可以配置传值的数据
  36. props : {
  37. title:{
  38. type :String,
  39. required : true,
  40. default : "www.baidu.com"
  41. },
  42. arr : {
  43. type : Array,
  44. }
  45. },
  46. methods: {
  47. one (){
  48. }
  49. },
  50. };
  51. </script>
  52. <style></style>
  1. components/Two.vue
  2. <template>
  3. <four></four>
  4. </template>
  5. <script>
  6. import Four from "./Four.vue";
  7. export default {
  8. components: {
  9. Four:Four,
  10. },
  11. }
  12. </script>
  1. components/Three.vue
  2. <template>
  3. <button @click="add()">增加余额</button>
  4. </template>
  5. <script>
  6. export default {
  7. methods: {
  8. add(){
  9. // 使用 $emit 方法,调用父文件的方法(https://v3.cn.vuejs.org/api/instance-methods.html#emit)
  10. // 所有子传父,都是通过事件传过去的 click传到add add到fun5 fun5 传到@fun5 fun5到fun4 1传 到e
  11. this.$emit('fun5',1);
  12. }
  13. },
  14. }
  15. </script>
  1. components/Four.vue
  2. <template>
  3. <!-- <button @click="fun">执行方法引入上一层</button> -->
  4. <button @click="fun2">执行方法引入上一层</button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. fun () {
  10. // 代表上一层 子组件调用父组件的方法:$parent
  11. this.$parent.fun3();
  12. },
  13. fun2(){
  14. 代表上一层
  15. this.$parent.$parent.fun5();
  16. }
  17. },
  18. }
  19. </script>
  1. components/Five.vue
  2. <template>
  3. <!-- 插槽 slot -->
  4. <div>
  5. <ul>
  6. <li>样式穿透</li>
  7. </ul>
  8. <slot></slot>
  9. <!-- 到这里可以是其他的模块,图片,文本,需要自定义,因为每个用组件的地方,可能不一样 -->
  10. <!-- 插槽可以实现组件的扩展性,抽取共性,保留不同
  11. 插槽就相当于函数的传值
  12. 官网:https://v3.cn.vuejs.org/guide/component-slots.html -->
  13. <!-- <slot></slot> -->
  14. <!-- <slot></slot> -->
  15. <!-- 如果2个插槽没有名字,传一次值,这2个插槽都要显示 -->
  16. <slot name="img"></slot>
  17. <slot name="img2" :php ="php"></slot>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. php:"百度",
  23. }
  24. </script>
  25. <style scoped>
  26. div{
  27. color: brown;
  28. }
  29. </style>

路由

  1. App.vue
  2. <template>
  3. <!-- app.vue页面没有刷新,刷新的是router-view 标签里的内容 -->
  4. <router-view></router-view>
  5. <router-link to="/">我是首页</router-link>|
  6. <router-link to="/lists">我是列表</router-link>|
  7. <router-link to="/course">我是课程</router-link>|
  8. <router-link to="/user">我是用户</router-link>|
  9. </template>
  10. <script>
  11. export default {
  12. }
  13. </script>
  1. router/index
  2. // hash模式:createWebHashHistory
  3. // import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
  4. import { createRouter, createWebHistory } from 'vue-router'
  5. // 我们要想给页面 增加路由管理,就需要把页面引入进来
  6. // import 引入页面文件,也可以用方法来引入
  7. // / 代表根目录,根页面
  8. import HomeView from '../views/HomeView.vue'
  9. import Index from '../views/Index.vue'
  10. import User from '../views/User.vue'
  11. import Course from '../views/Course.vue'
  12. import Lists from '../views/Lists.vue'
  13. const routes = [
  14. // {
  15. // path: '/',
  16. // name: 'home',
  17. // component: HomeView
  18. // },
  19. // {
  20. // path: '/about',
  21. // name: 'about',
  22. // route level code-splitting
  23. // this generates a separate chunk (about.[hash].js) for this route
  24. // which is lazy-loaded when the route is visited.
  25. // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  26. // },
  27. {
  28. path: '/', // 路由地址配置,就是浏览器上的url
  29. name: 'index', // 是页面的名称,自定义,但是不要重复
  30. component: Index // 这个是页面文件的路径
  31. },
  32. {
  33. path: '/lists', // 列表页面
  34. name: 'lists', // 是页面的名称,自定义,但是不要重复
  35. component: Lists // 这个是页面文件的路径
  36. },
  37. {
  38. path: '/course', // 课程页面
  39. name: 'course', // 是页面的名称,自定义,但是不要重复
  40. component: Course // 这个是页面文件的路径
  41. },
  42. {
  43. path: '/user', // 用户页面
  44. name: 'user', // 是页面的名称,自定义,但是不要重复
  45. component: User // 这个是页面文件的路径
  46. }
  47. ]
  48. const router = createRouter({
  49. // hash模式:createWebHashHistory
  50. // 访问路径就会多个#号 localhost:8080/#/user、localhost:8080/#/course
  51. history: createWebHistory(process.env.BASE_URL),
  52. routes
  53. })
  54. // 导出路由
  55. export default router
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!