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

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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdownm语法

2022-07-02 10:53:43