Router路由-VUE-CLI脚手架-VUE..JS组件

往底层挖矿
449 阅读3分钟

1. 父传子有哪些方式

通过子组件的 props 选项接收父组件的传值

Vue.component('my-component',{
    props:['title'],
    template: '<h3>{{title}}</h3>'
})

父组件设置方式：

<div id="app">
    <my-component-a title="123"></my-component-a>
    <my-component-a :title="123"></my-component-a>
    <my-component-a :title="item.title"></my-component-a>
</div>

new Vue({
    el:'#app',
    data: {
        item: {
            title:'123'
        }
    }
})

2. 子传父有哪些方式

商品为子组件，购物车为父组件，父组件需要统计商品个数，就需要在子组件个数变化时传值给父组件。

new Vue({
      el: '#app',
      data: {
        products: [
          {
            id: 1,
            title: '苹果一斤'
          },
          {
            id: 2,
            title: '香蕉一根'
          },
          {
            id: 3,
            title: '橙子一个'
          }
        ],
        totalCount: 0
      }
    });

<div id="app">
    <h3>购物车</h3>
    <product-item
      v-for="product in products"
      :key="product.id"
      :title="product.title"
      //父组件监听子组件的自定义事件，并设置处理程序
      @count-change="totalCount++"
    ></product-item>
    <p>商品总个数为：{{ totalCount }}</p>
  </div>

子组件向父组件传值

 Vue.component('ProductItem', {
      props: ['title'],
      template: `
        <div>
          <span>商品名称： {{ title }}, 商品个数： {{ count }}</span>
          <button @click="countIns">+1</button>
        </div>
      `,
      data () {
        return {
          count: 0
        }
      },
      //子组件数据变化时，通过 $emit() 触发自定义事件
      methods: {
        countIns () {
          this.$emit('count-change');
          this.count++;
        }
      }
    });

3. 如何让 CSS 只在当前组件中起作用

将当前组件的<style>修改为<style scoped>

4. keep-alive 的作用是什么

主要用于保留组件状态或避免组件重新渲染。

  • include 属性用于指定哪些组件会被缓存，具有多种设置方式
  • exclude 属性用于指定哪些组件不会被缓存
  • max 属性用于设置最大缓存个数

5. vue中如何获取DOM

$refs

  • $refs 用于获取设置了 ref 属性的 HTML 标签或子组件
  • 给普通 HTML 标签设置 ref 属性，$refs 可以获取 DOM 对象
  • 给子组件设置 ref 属性，渲染后可通过 $refs 获取子组件实例

6. 请说出 Vue CLI 项目中src目录每个文件夹的文件的用法

  • assets 静态资源目录
  • components 项目组件目录
  • App.vue 根组件
  • main.js 入口文件

7. 单页面应用的优缺点

优点:

  • 前后端分离开发，提高了开发效率
  • 业务场景切换时，局部更新结构
  • 用户体验好，更加接近本地应用

缺点：

  • 不利于 SEO
  • 初次首屏加载速度较慢
  • 页面复杂度比较高

8. $router和$route的区别

$router其实是VueRouter的一个实例，所以它是一个全局对象，包含了所有的子对象和属性 而$route是正在跳转的这个路由的局部对象，可以获取这个正在跳转的路由的name，path，params，query等等

9. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

Vue Router 提供了用于进行路由设置的组件 与 。

<div id="app">
    <router-link to="/user/1">用户1</router-link>
    <router-link to="/user/2">用户2</router-link>
    <router-link to="/user/3">用户3</router-link>

    <router-view></router-view>

  </div>

定义路由中需要的组件，并进行路由规则设置

var User = {
      template: `<div>这是用户 {{ $route.params.id }} 的功能</div>`
    };

定义路由中需要的组件，并进行路由规则设置

    var routes = [
      {
        path: '/user/:id', component: User
      }
    ];

创建 Vue Router 实例，通过 routes 属性配置路由

var router = new VueRouter({ routes });

创建 Vue 实例，通过 router 属性注入路由

var vm = new Vue({
      el: '#app',
      router
    });
  1. vue-router有几种模式，分别是什么

hash模式：

1.url路径会出现“#”号字符 2.hash值不包括在Http请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求 3.hash值的改变会触发hashchange事件

history模式：

1.整个地址重新加载，可以保存历史记录，方便前进后退 2.依赖H5 API和后台配置，没有后台配置的话，页面刷新时会出现404

avatar
文章
阅读
粉丝