精华内容
下载资源
问答
  • // methods scrollTop() { // 回到顶部 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var setI =...
    // methods
                scrollTop() {
                // 回到顶部
                    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    var setI = setInterval(() => {
                        scrollTop = scrollTop - scrollTop / 10;
                        window.scrollTo(0, scrollTop);
                        // console.log(scrollTop);
                        if (scrollTop <= 1) {
                            clearInterval(setI)
                        }
                    }, 10);
                },
                pushInfo(tbId) {
                //点击跳转按钮
                    this.scrollTop()
                    sessionStorage.setItem('foodDealId', tbId);
                    this.$router.push({
                        path: "/foodDeal/info",
                        query: {
                            id: tbId
                        }
                    })
                },
    
            watch: {
            // 监听路由变化获取数据
                '$route.query.id': function(id) {
                    sessionStorage.setItem('foodDealId', id);
                    this.getServer()
                }
            },
    
    展开全文
  • 常用的有单例模式,也可以采用组件间通信的方法 如下 <template> <div > <div @click="showComponent"> </div> <div class="x-class" v-show="show"> </div> </...

    常用的有单例模式,也可以采用组件间通信的方法

    如下

    <template>
      <div >
    
        <div @click="showComponent">
        </div>
    
        <div class="x-class" v-show="show">
        </div>
    
      </div>
    </template>
    <script>
    import Vue from "vue";
    var Event = new Vue(); //定义一个空的Vue实例
    export default {
      name: "XXX",
      data() {
        return {
          show: false
        };
      },
      mounted() {
        let self = this;
        Event.$on("XXX-closeAll", self.hideSelect); //监听到某个组件要求关闭的事件,事件名称自定义
      },
      props: {
    
      },
      methods: {
        hideSelect(){
            let self = this;
            self.show = false;
        },
        showComponent() {
          let self = this;
          let showStore = self.show;
          Event.$emit("XXX-closeAll"); //通知其他各组件关闭
          if (showStore) { //之前是已经打开的
            self.show = false;
          } else {
            self.show = true;
          }
        }
      }
    };
    </script>

     

    展开全文
  • 那么在配置路由的时候,如何避免相同组件不同路由无法重新渲染的问题呢? // 原来的样子 export const routes = [ { path: '/a', component: myPage }, { path: '/b', component: myPage }, ] 那么,...

    很多时候,我们会使用组件化开发,以免写出很多相同的页面代码。那么在配置路由的时候,如何避免相同组件不同路由无法重新渲染的问题呢?

    // 原来的样子
    export const routes = [
    	{
    		path: '/a',
    		component: myPage
    	},
    	{
    		path: '/b',
    		component: myPage
    	},
    ]
    

    那么,在访问a页面的时候,组件加载完成,切换到b页面,组件不会再重新渲染,再切回a页面,同样不会重新加载。

    // 后来的样子
    // router.js 保持不变
    export const routes = [
    	{
    		path: '/a',
    		component: myPage
    	},
    	{
    		path: '/b',
    		component: myPage
    	},
    ]
    // 修改App.vue
    <template>
    	<router-view :key="$route.path"></router-view>
    </template>
    

    这时,页面a,b来回切换,都会重新渲染,加载不同的数据。

    展开全文
  • <template> <div id="app"> <router-view :key="key" /> </div> </template> <script> export default { data() { return { }; }, mounted() { ... c...
    <template>
      <div id="app">
        <router-view :key="key" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
        };
      },
      mounted() {
      },
      computed: {
        key() {
            return this.$route.name !== undefined? this.$route.name + new Date(): this.$route + new Date()
        }
      }
    };
    </script>
    
    
    
    展开全文
  • 最近写的这个项目,有很多下拉菜单,每个菜单会有相应的种类型...所以想到了用key 去如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变...
  • Vue 相同组件 生命周期只调用一次

    千次阅读 2020-04-01 17:35:50
    Vue 相同组件 生命周期只调用一次 先来看一下官方文档的组件的介绍 因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 ...
  • 2.组件是可复用的 Vue 实例,与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等 3.组件注册: 3.1 组件参数的data值必须是函数 同时这个函数要求返回一个对象 3.2 组件模板必须是...
  • Vue - Vue组件基础

    2020-11-07 22:06:42
    为了介绍Vue组件,先用Vue组件来改造之前实现的TodoList: Vue学习(六)- 用Vue写一个TodoList小栗子 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <...
  • Vue基础:组件--组件组件通信

    千次阅读 2017-10-16 19:31:37
    在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展。使用组件 注册一个全局组件,你可以使用 Vue.component(tagName, options) ...
  • 相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的...定义组件名的方式有种: 使用 kebab-case Vue.component('my-component-
  • eact 和angular,vue 这三个框架最近都比较火,下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
  • vue圆形进度条组件 Vue-椭圆进展 (vue-ellipse-progress) A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of this plugin is to ...
  • Vue如何使用子组件 创建vue文件之后,需要在文件中引入组件 import comment from '../subcomponent/comment.vue' 然后在父组件的components中要为此子组件注册 export default{ data(){ return { ...
  • 构建一个 Vue 组件项目 开发vue组件使用webpack-simple vue init webpack-simple free-time-ui 项目目录结构: . ├── src/ // 源码目录 │ ├── packages/ // 组件目录 │ │ ├──avatar.vue ...
  • vue 全局组件注册With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js...
  • vue 颜色选择组件 径向拾色器-Vue (Radial Color Picker - Vue) Vue component of radial color picker. 径向颜色选择器的Vue组件。 Great UX starts with two basic principles - ease of use and simplicity. ...
  • 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的...所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 ...
  • vue组件组件之间的通讯组件简介全局组件局部组件动态组件异步组件组件之间通讯 组件简介 组件系统是vue的一个重要的概念,它允许我们使用小型、独立和通常可复用的组件构建大型应用。 创建组件种方式:1、全局...
  • 主要介绍了解决vue 单文件组件中样式加载问题,文章末尾给大家补充介绍了vue单文件组件中样式的问题,需要的朋友可以参考下
  • Vue引入公共组件

    千次阅读 2019-05-09 12:51:58
    Vue引入公共组件vue页面1需要引入子组件vue页面2子组件vue页面2内容为正常的vue页面,无需任何修改 vue页面1需要引入子组件vue页面2 1.在Vue页面1中添加 <template> <Header></Header>//直接...
  • Vue组件

    2018-09-14 17:04:53
    所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 使用方法: Vue.component(组件名称, 组件的内容) 例如: Vue.component('component',{ ...
  • VUE实现锚点组件

    2021-01-12 16:03:34
    组件分为横向和纵向个部分,横向和纵向都由数量相同的item组成。点击横向部分的item,横向部分吸顶,此item被选中,移动到中间,同时纵向部分对应的item滚动到视野中的最高点。同时页面滚动时,纵向部分滚动到哪...
  • vue之父子组件的传值

    多人点赞 热门讨论 2020-09-07 21:23:11
    父子组件传值 1.父组件向子组件传值 父组件向子组件传值是通过属性的方式 传值,传的值可以是任意类型...index.vue为父组件,test.vue为子组件 <div> hello <test :father="title" :t="t"></test>
  • vue 初始化组件

    2020-03-20 16:07:52
    Object.assign(this.$data, this.$options.data()) Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。...Vue组件可能会有这样的需求:在某种情况下,需要重置Vue组件的data数据...
  • 1、对象 会将mixin定义的和组件data定义的数据进行合并 2、非对象 取组件定义的数据
  • vue基础-组件

    千次阅读 2020-08-17 14:38:16
    组件 prop 传参数 (父组件传参子组件)...blog-post title="My journey with Vue"></blog-post> // 动态赋予一个变量的值 <blog-post v-bind:title="post.title"></blog-post> // 动态赋予一个复
  • Vue组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。下面这篇文章主要给大家介绍了关于vue中各组件之间传递数据的方法示例,需要的朋友可以...
  • vue 组件

    多人点赞 热门讨论 2020-08-31 08:50:50
    组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: 在 Vue 里,一个组件本质上是一个拥有...
  • 父子组件间传值 父→子: 父组件绑定数据,子组件接收数据 ...简述:父子组件传值,子组件只可以接收来自父组件的数据而不能修改父组件的数据,否则其他子组件引用相同组件数据时会产生BUG。 Q : 子组

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,468
精华内容 13,787
关键字:

vue两相同组件

vue 订阅