vue简介、环境配置、项目创建、路由配置、父子组件传值、路由模式修改(1)

2401_84411018

于 2024-05-09 15:49:46 发布

阅读量347

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411018/article/details/138617645

版权

程序员专栏收录该内容

202 篇文章 0 订阅

订阅专栏

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

+ 由于路由是在children中配置的所以需要router-view将视图引入  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/066ea60469e64e16b3eb609ee5903836.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAV1NaRlNORks=,size_20,color_FFFFFF,t_70,g_se,x_16)

页面展示
- apple组件
- banner组件

组件传值

父组件给子组件传值
父传子的核心理念：在父组件中引入子组件，然后直接给子组件传值，这里用：绑定data中的数据，不用则直接将后面的值直接传给子组件。
在子组件中使用props进行接收数据。如下所示：
- 父组件代码
- 子组件代码
- 页面展示
子传父
子组件通过自定义函数使用this.emit()方法将值传递给父组件
- 子组件
- 父组件
- 页面展示

在这里插入图片描述

子组件给子组件传值（兄弟组件传值）
兄弟组件通信通过公共仓库进行通信

文件目录
bus为公共文件
子组件1

<template>
  <div>
    <p>clild1</p>
    <p>{{msg}}</p>
    <p><button type="button" @click="click">点击</button></p>
  </div>
</template>

<script>
import bus from './bus.js'
export default{
  data(){
    return{
      msg:"clild1的消息"
    }
  },
  methods:{
    click(){
      bus.$emit("value1",this.msg)
    }
  }
}
</script>

<style>
</style>

子组件2

<template>
  <div>
    <p>clild2</p>
    <p>{{msg2}}</p>
  </div>
</template>

<script>
import bus from './bus.js'
export default{
  data(){
    return{
      msg2:""
    }
  },
  mounted() {
    var that = this;
    bus.$on('value1',function(data){
      console.log(data);
      that.msg2 = data
    })
  }
}
</script>

<style>
</style>

父组件

<template>
  <div>
    父组件
    <Child1></Child1>
    <Child2></Child2>
  </div>
</template>

<script>

import Child1 from './child1.vue';
import Child2 from './child2.vue'
export default{
  components:{Child1,Child2},
  data(){
    return{}
  }
}

</script>

<style>

</style>