vue组件的那些事

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量184 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端 vue组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41842236/article/details/124623049
版权

文章目录

一、ES6基础语法

在学习vue组件之前，我们需要具备ES6基础语法的知识。

1、变量声明

原因： 使用var声明变量存在作用范围混淆问题。
在这里插入图片描述
let： 用来声明局部变量。
好处: 作用范围严谨，从代码声明处开始到代码块结束为止。
一般在声明基本变量时推荐使用let。
在这里插入图片描述
const：用来声明js中常量。
好处: 一旦被赋值不能被修改。
一般在声明js中的对象、数组时推荐使用const。
在这里插入图片描述

2、箭头函数

在使用匿名函数 function(){} 作为参数的时候，推荐使用ES6中箭头函数 (参数,参数)=>{函数体}
在这里插入图片描述

注意：
    1.当箭头函数没有参数或者参数大于1个时，参数必须加入()；
    2.当箭头函数只有一个参数时 () 可以省略不写；
    3.当函数体中只有一行代码时函数体{} 可以省略不写；
    4.箭头函数和匿名函数的最大区别：箭头函数没有自己的this，匿名函数存在自己的this。

3、模板字符串

在这里插入图片描述

4、对象的定义

如果对象的属性名和变量名一致时，只需要写一个即可。
在这里插入图片描述

二、vue中的组件

  • vue推荐的开发方式是基于单页面的应用(SPA：Single Page Application)
  • 什么是SPA？ 日后项目中只有一个页面（index.html）
  • 为什么vue推荐使用SPA的开发方式？ 一个应用中只能存在一个vue实例
  • 使用现有手段严格遵循SPA存在的问题？ 使用单页面开发，代码越来越多不利于后续的维护；在一个页面中完成全部业务功能，导致当前页面每次加载速度缓慢
  • 为了严格遵循SPA的开发方式，在vue中提供了组件(component)

组件的作用：用来减少vue实例对象中的代码量,日后在使用vue的开发过程中,可以根据 不同业务功能将页面划分为不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用vue进行开发时页面管理,方便开发人员维护。

1、组件的使用

全局组件的注册和使用

//1.开发全局组件
Vue.component('login',{
  template:'<div><h1>用户登录</h1></div>'
});
//2.使用全局组件  在Vue实例范围内
<login></login>

注意：
1. Vue.component用来开发全局组件 参数1: 组件的名称 参数2: 组件配置{} template:’ '用来书写组件的html代码 template中必须有且只有一个root元素；
2. 使用时需要在Vue的作用范围内根据组件名使用全局组件；
3. 如果在注册组件过程中使用驼峰命名组件的方式，在使用组件时必须将驼峰的所有单词小写加入-线进行使用；

局部组件注册和使用

通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加。

  • 第一种开发方式
//局部组件登录模板声明
let login ={   //具体局部组件名称
  template:'<div><h2>用户登录</h2></div>'
};
const app = new Vue({
  el: "#app",
  data: {},
  methods: {},
  components:{  //用来注册局部组件
    login:login  //注册局部组件
  }
});

//局部组件使用 在Vue实例范围内
<login></login>
  • 第二种开发方式
//1.声明局部组件模板  template 标签 注意:在Vue实例作用范围外声明
  <template id="loginTemplate">
      <h1>用户登录</h1>
  </template>

//2.定义变量用来保存模板配置对象
    let login ={   //具体局部组件名称
        template:'#loginTemplate'  //使用自定义template标签选择器即可
    };

//3.注册组件	
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{  //用来注册局部组件
            login:login  //注册局部组件，也可以直接使用login,
        }
    });

 //4.局部组件使用 在Vue实例范围内
	 <login></login>

2、组件中定义数据和事件等

组件中定义属于组件的数据

//组件声明的配置对象
const login = {
  template:'<div><h1>{{ msg }} </h1><ul><li v-for="item,index in lists">{{ index }}{{ item }}</li></ul></div>',
  data(){   //使用data函数方式定义组件的数据   在templatehtml代码中通过插值表达式直接获取
    return {
      msg:"hello",
      lists:['java','spring','springboot']
    }//组件自己内部数据
  }
}

组件中定义属于组件的方法

 const login={
        template:'<div><input type="button" value="点我触发组件中事件" @click="change"></div>',
        data(){
            return {
                name:'xiaozhang'
            };
        },
        methods:{
            change(){
                alert(this.name)
                alert('触发事件');
            }
        }
    }

1. 组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名="函数名"方式即可；
2. 在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this指向的是当前组件的实例。

组件中定义属于组件的计算属性

const login = {
  template:'<div><h1>{{ squareCount }}</h1></div>',
  data(){   //使用data函数方式定义组件的数据   在templatehtml代码中通过插值表达式直接获取
    return {
      count: 2
    }//组件自己内部数据
  },
  computed: {         //组件的计算属性
       squareCount(){
           return this.count * this.count;
       }
   },
}

组件中使用属于组件的生命周期函数

 //初始化阶段
beforeCreate(){
     console.log("beforeCreate:", this.message);
 },
 created(){
     console.log("created:", this.message);
 },
 beforeMount(){         
     //console.log("beforeMount:", document.getElementById("h2").innerText);
 },
 mounted(){             
     console.log("mounted:", document.getElementById("h2").innerText);
 },
 //运行阶段
 beforeUpdate(){
     console.log("beforeUpdate（vue中的数据）:", this.count);
     console.log("页面上的数据:", document.getElementById("h3").innerText);
 },
 updated(){
     console.log("beforeUpdate（vue中的数据）:", this.count);
     console.log("页面上的数据:", document.getElementById("h3").innerText);
 },
 //销毁阶段
 beforeDestroy(){
     console.log("beforeDestroy:开始销毁");
 },
 destroyed(){
     console.log("destroyed:销毁完成");
 },

3、组件的数据传递

props的作用：用来给组件传递相应静态数据或者是动态数据。

  • 通过在组件上声明静态数据传递给组件内部
<body>
    <div id="app">
        <!--使用登录组件-->
        <login msg="我是登录组件" title="父组件向子组件传递静态数据"></login>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    //定义组件的配置对象
    const login = {
        template: `<div><h2>{{NewMsg}}=={{title}}</h2><reg count="1111"></reg></div>`,
        data(){ //定义组件的数据
            return {
                NewMsg: this.msg,
            };
        },
        props: ['msg','title'],      //使用props接收数据，相当于向data中添加了一个数据
        components: {   //在组件中定义子组件
            reg: {
                template: `<div><h3>{{count}}</h3></div>`,
                props: ['count']
            }
        }
    };
    const app = new Vue({
        el: "#app",
        data: {
          msg: "父组件向子组件传递静态数据"
        },
        methods: {},
        computed: {},
        components: {       //注册局部组件
            login,
        }
    });
</script>
  • 通过在组件上声明动态数据传递给组件内部
<body>
    <div id="app">
        <!--使用登录组件-->
        <login :count="counter" :name="name"></login>
        <input type="text" v-model="counter">
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const login = {
        template: `<div><h2>{{count}}====={{name}}</h2></div>`,
        props: ['count','name']
    };
    const app = new Vue({
        el: "#app",
        data: {
            msg: "父组件向子组件传递动态数据",
            counter: 0,
            name: "我是一个组件哈哈哈！"
        },
        components: {       //注册局部组件
            login,
        }
    });
</script>
  • prop的单向数据流

1. 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
2. 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

<body>
    <div id="app">
        <!--使用登录组件-->
        <login :count="counter"></login>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const login = {
        template: `<div><h2>{{count}}</h2> <button @click="increment">点我++</button> </div>`,
        methods: {
            increment(){
                this.count++;
            }
        },
        props: ['count']
    };
    const app = new Vue({
        el: "#app",
        data: {
            msg: "父组件向子组件传递动态数据",
            counter: 0,
        },
        components: {       //注册局部组件
            login,
        }
    });
</script>

在这里插入图片描述
可以使用如下方式避免vue发出的警告

<body>
    <div id="app">
        <!--使用登录组件-->
        <login :count="counter"></login>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const login = {
        template: `<div><h2>{{aaCount}}</h2> <button @click="increment">点我++</button> </div>`,
        data(){
            return {
               aaCount: this.count
            }
        },
        methods: {
            increment(){
               this.aaCount++;
            }
        },
        props: ['count']
    };
    const app = new Vue({
        el: "#app",
        data: {
            msg: "父组件向子组件传递动态数据",
            counter: 0,
        },
        methods: {
        },
        computed: {},
        components: {       //注册局部组件
            login,
        }
    });
</script>

4、组件中的事件传递

向子组件中传递事件并在子组件中调用该事件
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

可以理解成子组件向父组件传递数据。

<body>
    <div id="app">
        <!--使用登录组件-->
        <login :message="msg" @aa="testParent"></login>
        <h1>{{count}}</h1>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const login = {
        template: `<div><h1>{{message}}</h1> <button @click="testChild">点我</button> </div>`,
        data(){
            return {
                count:222222
            }
        },
        methods: {
            testChild(){
                console.log('我是子组件中的方法');
                //this.$emit('aa',this.count);
                this.$emit('aa',{id:this.count,name:"小陈",age:23});
            }
        },
        props: ['message']
    };
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue组件中的事件传递",
            count:20
        },
        methods: {
            testParent(user){
                console.log('我是父组件中的方法');
                this.count = user.id;
                console.log(user.id);
                console.log(user.name);
                console.log(user.age);
            }
        },
        components: {       //注册局部组件
            login,
        }
    });
</script>

在这里插入图片描述

@青春之路
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件化组件同页面不刷新复用，数据不更新问题
weixin_52417514的博客
02-07 943
使用key解决同页面复用组件，组件内部数据不更新问题
vue组件复用出现的一些问题
weixin_42157001的博客
11-03 1347
在项目开发中根据需求封装了一个组件，并且把跟组件相关的所有接口调用全部放在了该组件中执行，然后把这个组件引入到了父组件中，每当父组件初始化的时候，子组件里的接口都会被调用一次，后面由于需求的变更，在这个父组件中插入两次子组件。 好处是，提高了组件的复用性，减少了代码的编写； 缺点是，父组件初始化的时候会导致子组件中的接口双倍调用，就会引发性能问题； 解决方法是，将子组件用到的初始数据接口（初始数据接口也就是会在created或者mounte...
解决vue中多个路由共用同一个组件时，组件不会重新触发生命周期函数的问题
qq_45838886的博客
04-29 2134
解决vue中多个路由共用同一个组件时，组件不会重新触发生命周期函数的问题 比如aaa/a页面和aaa/b页面都用同一个组件c（使用路由跳转），但是在这两个页面相互切换时，并不会重新调用组件c的生命周期函数，我个人的理解是，当页面a切换到c时，在切换的过程中，vue会判断下一个路由的组件是否和当前的路由组件一样，如果一样，就直接复用，因此不会执行destroy等生命周期函数。 官方原话： 因此，如果想在切换的同时，重新加载组件，即重新触发组件的生命周期函数，可以给router-view绑定一个key值，这个k
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 7388
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
vue中同一个页面多次复用同一个组件的相互干扰问题
热门推荐
weixin_47097870的博客
02-23 1万+
vue中同一个页面多次复用同一个组件的相互干扰问题
深入解析Vue 组件命名那些事
08-29
本篇文章主要介绍了深入解析Vue 组件命名那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue异步组件使用详解
08-30
Vue.js 是一款流行的前端框架，它提供了一种强大的特性——异步组件，使得开发者能够按需加载组件，提高应用的性能。异步组件是Vue.js中优化应用加载速度的重要手段，尤其是在大型项目中，能够显著减少初始加载时间...
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue中bus的用法及bus.$on重复触发问题总结
weixin_44900104的博客
11-04 3115
vue中bus的用法及bus.$on重复触发问题总结
Vue2.0 探索之路——组件复用重复响应的研究
weixin_33753003的博客
08-22 211
前言 前段时间，同事发现一个弹窗组件被多个页面复用，然后点击按钮出现了多次响应。明明页面都会被销毁掉的呀，为啥还会出现重复调用呢。 其实以前我也碰到过一两次，不知道啥情况后来没有再复现，再加上工期紧，当时就没有引起重视。这次同事碰到了，多次试验复现了。才深知当时挖的大坑啊没有填。 所以这次就单独弄了个demo专门复现并解决这个问题。也希望...
Vue组件复用问题的一个解决方法
心有谦谦结
03-17 9881
在vue中，如果路由指向的页面组件是同一个，那么路由出口显示的页面组件就不会被重新渲染。
vue中组件复用带来的问题
lanfeng330的专栏
05-18 895
通过数组迭代渲染的同一组件的多个实例，每个实例的状态是不一样的。（比如定位信息：left,top是不一样的）。当把数组中的一个元素删除时，对应的组件实例没有被销毁，而是被重用。自然是被删除元素的下一个元素。巧的是，组件有些状态信息的设置是一次性的，或者说没有重置的方法。导致结果是，被删元素的下一个元素在界面上有变动，而实际这个数据没有更改。是他的组件实例复用了别人的，还留有别人的信息。这也是vue的预期内的行为。这样由于key不一样，vue认为是不可重用的组件，就会销毁后，重新创建。
vue 组件复用的两种方法以及el-tab-pane切换标签时如何重新触发钩子函数
77今天也学习了的博客
04-28 7329
当多个页面具有相同的页面模板时，想要共同同一个组件，有两种方法实现。 方法一 1.app.vue中 必须加上key属性，让每次进入路由时都重新触发钩子函数 <router-view :key="key" /> computed: { key() { // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同 // console.lo...
在vue2.0中父组件如何触发子组件的自定义方法？
大灰狼的小绵羊哥哥的博客
03-10 3887
如果我在父组件的button上绑定了click事件，我想当点击button时可以触发子组件(单文件的子组件xx.vue)的某个方法（如fn1），要这样的效果该怎样实现？之前看了vue1的文档实例里面有methods和events这两者有什么区别，为什么在vue2去掉dispatch后我用emit('fn'),如果fn放在events会没有响应，而放在methods里面才会被触发到？ 子组件：
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 428
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 127
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 289
解决页面放大，图片模糊的问题
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1273
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
vue组件精讲.docx
07-14
vue组件精讲

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值