路由守卫面试题（路由守卫vue）



//子组件
<template>
   <slot />
</template>

//父组件
<Child>
 <div>默认插槽</div>
</Child>

//子组件
<template>
 <slot name="content"></slot>
</template>

//父组件
<Child>
   <template v-slot:content>具名插槽内容</template>
</Child>

<li>商品价格：{{item.price | filterPrice}}</li>

filters: { filterPrice (price) { return price ? ('￥' + price) : '--' } }

<input v-model="message" />
等同于
<input
  :value="message"
  @input="message=$event.target.value"
>

<div v-example:foo.bar="baz">

{
   arg: 'foo',
   modifiers: { bar: true },
   value: /* `baz` 的值 */,
   oldValue: /* 上一次更新时 `baz` 的值 */
}

<template>
   <div>{{ addSum }}</div>
   <div>{{ addSum }}</div>
   <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
   console.log('内部逻辑执行')
   return a.value + b.value
})
</script>

Vue2(选项式 API)Vue3(setup)描述beforeCreate-实例创建前created-实例创建后beforeMountonBeforeMountDOM 挂载前调用mountedonMountedDOM 挂载完成调用beforeUpdateonBeforeUpdate数据更新之前被调用updatedonUpdated数据更新之后被调用beforeDestroyonBeforeUnmount组件销毁前调用destroyedonUnmounted组件销毁完成调用

const router = new VueRouter({
 routes: [{ path: "/list", component: () => import("@/components/list.vue") }],
});

window.onhashchange = function (event) {
 console.log(event.oldURL, event.newURL);
 let hash = location.hash.slice(1);
};

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

location / {
 try_files $uri $uri/ /index.html;
}

方式Vue2Vue3父传子propsprops子传父$emitemits父传子$attrsattrs子传父$listeners无(合并到 attrs 方式)父传子provide/injectprovide/inject子组件访问父组件$parent无父组件访问子组件$children无父组件访问子组件$refexpose&ref兄弟组件传值EventBusmitt

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/14970.html