devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE笔记之 keep-alive , slot , $emit , props ,refs , eventbus,router,v-bind:src 路由获取参数,右击，阻止默认行为和冒泡_ 获取ref

作者：花生_TL007 | 2024-02-23 00:37:40

赞

踩

获取ref

vue中使用less

安装less依赖，npm install less less-loader --save

 

vue项目优化之通过keep-alive数据缓存的方法

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

1、缓存所有的页面,适用于每个页面都有请求的情况。方法如下，在需要缓存的router-view用keep-alive标签进行包裹起来。

1

2

3

<keep-alive>

<router-view></router-view>

</keep-alive>

将首次触发请求写到created钩子里边，就能实现缓存。比如从列表页，去了详情页，回来还是原来的页面。

2、缓存部分组件或者页面，使用router.meta这个属性通过判断的方法可以实现。方法如下：              

1

2

3

4

5

<keep-alive v-if="$route.meta.keepAlive">

<router-view></router-view>

</keep-alive>

<router-view v-if="! $route.meta.keepAlive">

</router-view>

router设置如下：

1

2

3

4

5

routers:[

     {  path: '/home',

       name: home,

       meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }

    ]

还可以通过新增的属性include/exclude来设置。见名思意，include包含的意思，exclude除了的意思。这里需要用到组件的名称即name来进行设置，所以name肯定就要加上了。 

加入 a,b组件需要缓存，c,d组件不需要缓存。写法如下：

1

2

3

4

5

6

<keep-alive include="a,b">

<component></component>

</keep-alive>  

<keep-alive exclude="c,d">

<component></component>

</keep-alive>  

 

 

单个slot

　　除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

　　最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

<template>

  <div id="app">

      <children>

        <span>子组件内部元素</span>

      </children>

  </div>

</template>

 

 

<script>

  export default {

    name: 'hello',

    components: {

      children: {

        template: '<div>这里是子组件</div>'

      }

    }

  }

</script>

 

我们发现写在 children模板内部的span被默认删除了。如果想让span显示那么此刻就应该使用slot。

<script>

  export default {

    name: 'hello',

    components: {

      children: {

        template: '<div><slot><p>默认效果</p></slot>这里是子组件</div>'

      }

    }

  }

</script>

这是父组件的内容 就会插入到slot标签中 并且将slot也给替换掉

 

 

具名slot

　　上面案例中讲解的是当组件的模板中有一个slot的方法，那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。

　　<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

　　仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

<template>

  <div id="app">

    <children>

      <div slot="header">

        <ul>

          <li>首页</li>

          <li>商城</li>

        </ul>

      </div>

      <div>

        这个是默认的没有具名的solt

      </div>

      <div slot="footer">

          <p>备案号</p>

      </div>

    </children>

  </div>

</template>

<script>

  var Child = {

    template: ' <div>这是子组件<div></div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div>'

  }

  export default {

    name: 'hello',

    components: {

      children: Child

    }

  }

</script>

可以设置多个插槽，将slot的标签内插入对应的内容，如果slot没有起名字 那么默认的就是default，渲染的时候就会把模板里面没有slot属性的内容拿过来渲染，模板里面没有slot属性的表示 slot=‘default’

 

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

 

例如：子组件：

  1. <template>
  2. <div class="train-city">
  3. <h3>父组件传给子组件的toCity:{{sendData}}</h3>
  4. <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name:'trainCity',
  10. props:['sendData'], // 用来接收父组件传给子组件的数据
  11. methods:{
  12. select(val) {
  13. let data = {
  14. cityname: val
  15. };
  16. this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
  17. }
  18. }
  19. }
  20. </script>

父组件：

  1. <template>
  2. <div>父组件的toCity{{toCity}}</div>
  3. <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
  4. <template>
  5. <script>
  6. import TrainCity from "./train-city";
  7. export default {
  8. name:'index',
  9. components: {TrainCity},
  10. data () {
  11. return {
  12. toCity:"北京"
  13. }
  14. },
  15. methods:{
  16. updateCity(data){//触发子组件城市选择-选择城市的事件
  17. this.toCity = data.cityname;//改变了父组件的值
  18. console.log('toCity:'+this.toCity)
  19. }
  20. }
  21. }
  22. </script>

 

 

vue $refs的基本用法

<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div>

 

 

<script>

new Vue({

    el: "#app",

    methods:{

        add:function(){

             this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗

        }

    }

 })

</script>

 

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

 

 

 

 

vue2.0s中eventBus实现兄弟组件通信

受用eventbus的方法很是简单，我们需要做三步事情，

第一步，我们需要创造一个容器去充当我们的eventbus

第二步，我们需要去抛出，或者说提交我们的事件

第三步，我们去监听我们的那个事件（也许这才是第二部）

 

主要是现实途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

<template> <div id="app"> <img src="./assets/logo.png"> <Apple></Apple> <Banana></Banana> </div> </template> <script> import Apple from './components/Apple.vue' import Banana from './components/Banana.vue' export default { name: 'app', components: { Apple, Banana } } </script>

 

Apple.vue

 

Banana.vue组件 <template> <div> <h1>{{msg}}</h1> <div> <button @click="aa">Add Banana</button> </div> </div> </template> <script type="text/ecmascript-6"> import bus from '../bus' export default{ data () { return { msg: 'i am banana component', total: 0 } }, methods: { aa: function () { bus.$emit('aa', this.total++) } } } </script>

 

bus.js

import Vue from 'vue'; export default new Vue();

 

 

Vue-Router来实现组件间跳转的三种方法\

通过router-link实现跳转 <router-link to="/myRegister">注册</router-link>

通过js的编程的方式 this.$router.push('/myLogin'); this.$router.replace(...) path:'/*',reidrect:'/home'

router.push(location)

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

 

v-bind:src = ""  等于  :src=""      imgUrl是ajax请求的数据

<img src="{{ imgUrl }}"/> 错误的写法

<img :src="{{ imgUrl }}"/>  错误的写法 

<img v-bind:src="imgUrl"/>  正确的写法  

 

props:  父组件给子组件传值

父组件

<child aa="aa"></child>  静态值

<child :aa="aa"></child>  动态值  这是等号右边的aa就是一个变量了

子组件

props:['aa'];

如果子组件想从props得到值赋值给data中的数据  

如果是静态传值

methods:{

   getData (){

       this.default_aa == this.aa  这样就可以获取了 

    }

}

 

如果是动态传值   需要使用到watch  或者使用computed

  1. data:function(){
  2.     return {default_aa:''}
  3. },
  4. props:['aa'];
  5. methods:{},
  6. //使用watch方式来处理props给过来的数据
  7. watch:{
  8.    aa:function(newVal,oldVal){
  9.       this.default_aa = newVal;
  10.    }
  11. },
  12. //使用computed的方式
  13. computed:{
  14.     default_aa : function(){
  15.         return this.aa;
  16.     },
  17.     
  18. },

 

路由获取参数

{ path: '/detail/:id/', name: 'detail', component: detail, meta: { title: '详情' } }

上面的路由获取参数的方式为  let id = this.$route.params.id

但是上面的这种方式对应的路由是 /detail/234  如果没有后面的参数值的话  页面会找不到

 

如果有的参数可传可不传，可以使用？传参 

{ path: '/detail', name: 'detail', component: detail, meta: { title: '详情' } }
例如：http://192.168.1.12:8080/#/detail/?id=123    问号及其后面可要可不要
获取的时候：let id = this.$route.query.id    这样即使取不到参数，页面也不会报错

 

右击

<button @contextmenu.prevent="btn()">按钮</button>

阻止默认行为和冒泡

<button @click="btn(10,$event)">按钮</button>

btn:function(b,ev){
      console.log(b);
      //ev.preventDefault();//取消元素默认行为
  }

阻止冒泡的两种方式   @click.stop  和  event.cancelBubble = true;

<div class="box" @click="box()">
            <button @click="show($event)">按钮</button>
            <button @click.stop="showBtn">按钮2</button>
        </div>

show: function (ev) {
        alert("show");
        ev.cancelBubble = true;
  },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/132386
推荐阅读