Vue(调接口、组件、组件通信、生命周期)

最新推荐文章于 2024-07-08 16:50:09 发布

牛仔很会忙

最新推荐文章于 2024-07-08 16:50:09 发布

阅读量1.6k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_66970189/article/details/125495916

版权

本文介绍了Vue.js中如何使用axios进行API接口调用，包括GET和POST请求的使用方法。此外，详细阐述了Vue组件化编程的核心，包括全局和私有组件的创建，以及动态组件的实现。在组件通信方面，讲解了父组件向子组件、子组件向父组件以及兄弟组件间的数据传递，并提供了多种实现方式。最后，简要概述了Vue组件的生命周期，强调了created、mounted和updated等关键阶段的应用。

摘要由CSDN通过智能技术生成

Vue调接口

使用axios，它是用promise封装的ajax，需要调用相应的js文件。
vue调接口使用axios请求，但axios请求不止可以用在vue上

方法一

axios.get（“url”,{data}）.then(res=>{}).catch(err=>{})
axios.post（“url”,{data}）.then(res=>{}).catch(err=>{})

我们在调取到接口后是可以使用es6中的then和catch方法的，它们是链式编程，可以直接在后面追加，与promise中的使用是相同的。then代表获取成功后的操作，catch是获取失败后的操作

方法二

aixos（{
	url：“url”,
	methods:"get/post",
	params:{
				data:data   // 请求需要的参数
				},
	headers:{}   // 请求头，有时候会写cookie、token、content-type
}）.then(res=>{}).catch(err=>{})

请求方式：get、post、option（预请求）
数据传递方式：

formData：form表单请求
Query String ：在地址栏拼接，使用方法二
request ：post传参，使用方法一

组件

vue核心：数据驱动，组件化
组件化：单页面应用/单页面编程
现在就来了解一下组件，组件分为全局组件和私有组件
组件就是页面中的每一个部分

全局组件

使用vue.component创建组件

        Vue.component("组件名", {
            template:`<div @事件>创建组件的内容，必须要有一个标签包起来</div>`,
            data(){
                return{

                }
            },
            methods:{
                
            }
        })

私有组件

        let myTip2 = {
            template:`
            <div>{{name2}}这是私有组件
                <hr>
                <my-tip3></my-tip3>
                </div>
            `,
            data(){
                return{
                    name2:"再看！"
                }
            },
        }
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {

            },
            // 私有组件
            components:{
                myTip2
            }
        });

在vue实例中，使用components以对象的形式，将外部声明的组件引入，键值相同时，可以直接写键

template中放的就是每一个模块的代码，但是要注意必须要有一个根标签将它们都包在里面，在这个组件中，也可以使用事件，也可以使用组件中的变量。
使用组件：<组件名></组件名>
如果组件名是驼峰式，例如aB，在使用时<a-b></a-b>
组件里还可以嵌套组件，同样的形式写在子组件中就可以了

动态组件

<component :is="变量名"></component>
上案例
html代码

	<div id="app">
        <button @click="tipname='tip1'">组件1</button>
        <button @click="tipname='tip2'">组件2</button>
        <button @click="tipname='tip3'">组件3</button>
        <!-- 不要使用驼峰命名 -->
        <component :is="tipname"></component>    
    </div>
    <template id="tip1">
        <div>
            组件1 {{name}}
        </div>
    </template>
    <template id="tip2">
        <div>
            组件2
        </div>
    </template>
    <template id="tip3">
        <div>
            组件3
        </div>
    </template>

js代码

let tip1 = {
            template: `#tip1`,
            data() {
                return {
                    name: "123"
                }
            }
        }
        let tip2 = {
            template: `#tip2`
        }
        let tip3 = {
            template: `#tip3`
        }
        new Vue({
            el: '#app',
            data() {
                return {
                    tipname:"tip1"
                }
            },
            methods: {

            },
            components:{
                tip1,tip2,tip3
            }
        });

从案例中我们还可以学到一个创建组件的方法，在html中通过template标签进行创建，然后在js中进行引入#id名即可
在<div id="app"></div>标签中，使用<component :is="变量名"></component> ，作为存放组件的容器
在vue实例中，在data中return变量名："组件名"，就可以控制让哪一个组件显示出来

组件通信

父级组件变量传给子级组件

父组件中，子级组件引入后，给子级组件标签使用v-bind，声明一个变量用于存放父级传来的值，（变量名不要使用驼峰式）
子级组件通过props:[“变量名”]来接收父级传来的值，子组件可以直接使用该变量

 <!-- 父级传子级 -->
    <div id="app">
        <!-- 通过bind将父级的变量传给子集 -->
        <son :father="father"></son>
    </div>

    <script>
        Vue.component("son", {
            template:`<div>这是子级组件调用父级的变量{{father}}</div>`,
            data(){
                return{
                }
            },
            props:["father"]   // 接收父级传过来的变量
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    father:"这是父级的变量"
                }
            },
            methods: {

            }
        });
    </script>

子组件将变量传给父组件

方法一

子级组件中，添加事件，由事件进行触发，在组件中的methods，添加方法，在方法中使用this.$emit("自定义事件名"，传递的变量)将变量抛出去
父级组件中，给子组件标签名添加事件：@“自定义事件名=“自定义事件名2””，然后在vue实例中的methods里，将自定义事件名2进行声明，在这个方法中，我们就已经可以使用子集传来的方法了

html代码

    <!-- 子集到父级，使用this.$emit  子集创建事件，将变量传出，父级使用事件，获取到变量 -->
    <div id="app">
        <son @send1="send"></son>
        <hr>
        父级调用子级变量 {{name2}}

    </div>
    <template id="son">
        <div>
            这是子组件的变量 {{name1}}
            <!-- 子级通过事件将变量传给父级 -->
            <button @click="sonsend">点击传给父级</button>
        </div>
    </template>

js代码

Vue.component("son", {
            template:"#son",
            data(){
                return{
                    name1:"这是子级的变量"
                }
            },
            methods:{
                sonsend(){
                    this.$emit("send1",this.name1)   // 通过$emit将变量抛出
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    name2:""
                }
            },
            methods: {
                send(e){
                    console.log(e);
                    this.name2=e
                }
            }
        });

方法2
在父组件中，给子组件标签名中添加ref属性，ref="自定义名称"
父组件中通过事件，可以使用this.$refs获取到子组件，然后可以一层一层获取到子组件中的变量

html代码

    <div id="app">
        <son ref="child"></son>
        <son2 ref="child2"></son2>
        <button @click="getChild">点击获取子级的变量</button>
    </div>
    <template id="son">
        <div>
            这是子级 {{name1}}
        </div>
    </template>
    <template id="son2">
        <div>
            这是子级二 {{name2}}
        </div>
    </template>

js代码

let son = {
            template: "#son",
            data(){
                return{
                    name1:"这是子级的变量",
                    name11:"这是子级变量11"
                }
            }
        }
        let son2 = {
            template: "#son2",
            data(){
                return{
                    name2:"这是子级的变量二"
                }
            }
        }
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                getChild(){
                    console.log(this.$refs);
                }
            },
            components: {
                son,son2
            }
        });

兄弟之间传递变量

方法一
子组件将变量传给父级，再由父级将变量传递给需要传递的子组件
html代码

    <div id="app">
        <!-- 3.将父级的变量传给子级 -->
        <bro1 :father="father"></bro1>
        
        <bro2 @brother="brother"></bro2>
    </div>

js代码

		Vue.component("bro1", {
            template:`<div>这是兄弟元素一 {{father}}</div>`,
            props:["father"]    // 4.子级接收父亲的变量
        });
        Vue.component("bro2", {
            template:`<div>这是兄弟元素二 <button @click="brosend">点击传递兄弟变量</button></div>`,
            data(){
                return{
                    name:"这是兄弟元素的变量"
                }
            },
            methods:{
                brosend(){
                    this.$emit("brother",this.name);    // 1.先传递给父亲，再由父亲传给兄弟
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    father:""
                }
            },
            methods: {
                brother(e){
                    this.father=e;    // 2.将子级传来的变量赋到自己的变量上
                }
            }
        });

方法二
使用数据共享中心，由中间件传值，bus
首先实例化bus，const bus = new Vue()
发送方通过事件使用bus将变量传递出去，bus.$emit("自定义变量名"，传递的变量)
接收方在mounted（生命周期）中，使用on对传递过来的变量进行操作，bus.$on("自定义变量名",箭头函数)
html代码

    <div id="app">
        <bro1></bro1>
        <bro2></bro2>
    </div>

js代码

        // 1.将bus实例化
        const bus = new Vue();
        Vue.component("bro1", {
            template:`<div>这是兄弟元素一 {{name2}}</div>`,
            data(){
                return{
                    name2:""
                }
            },
            // 3.操作传递过来的变量
            mounted() {
                bus.$on("brother",e=>{           // 用箭头函数，不然会有this指向的问题
                    this.name2=e
                })
            },
        })
        Vue.component("bro2", {
            template:`<div>这是兄弟元素二 <button @click="brosend">点击传给兄弟</button></div>`,
            data(){
                return{
                    name:"这是兄弟的变量"
                }
            },
            methods:{
                // 2.通过方法将变量进行传递
                brosend(){
                    bus.$emit("brother",this.name)
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {

            }
        });

vue生命周期

vue生命周期有11个，常用的有8个，它们都是钩子函数

beforeCreate 刚刚创建vm(数据监视层)，没有创建view（视图层）和model（数据层），dom没有加载，data也没有加载
created vm（数据监视层）初始化结束。data数据加载完毕，dom未加载。此时methods中的方法，可以放在这里执行
beforeMount 加载dom元素，但数据没有渲染
mounted dom加载完成，数据挂载结束，虚拟dom加载完成
beforeUpdate 修改数据时触发，数据已经修改但页面没有重新渲染
update 数据修改完，页面也重新渲染
beforeDestroy 销毁之前
destroyed 销毁完成以后，销毁所有指令，销毁view与数据之间的联系

用法
我们需要在页面加载到特定的时期进行操作，就可以使用以上的钩子，例如，我想在数据销毁之前，进行一个询问，可以这样进行：
html代码

    <div id="app">
        <div id="box">
            <div>
                <button @click="names='acomp'">李不白</button>
                <button @click="names='bcomp'">白不易</button>
            </div>
            <component :is="names"></component>

        </div>
    </div>

js代码：

    Vue.component("acomp", {
        template: `<div>李不白</div>`,
   });
   
    Vue.component("bcomp", {
        template: `<div>白不易</div>`,
        beforeDestroy() {
        // 销毁之前
        alert("你确定？")
        console.log("b-beforeDestroy", this.$el, this.$data);
        },
   });
    new Vue({
        el: '#app',
        data() {
            return {
                num: 10,
                names: "acomp"
            }
        },
        })

从组件a跳转到组件b，会触发六个钩子函数：组件a的销毁前后，组件b的创建前后和挂载前后

总结

除去原生js的ajax、jquery的ajax以及es6中promise封装的ajax，我们又学到了vue的ajax，但vue的ajax其实也是通过promise进行封装的，所以也可以使用then和catch方法，用起来是比较方便的。
今天又学到了vue的另外一个核心：组件化。我们的页面是由一个一个的组件，一起组成的，其中组件的嵌套是在所难免的，会有许多的子组件、又会有许多的相对的父组件、兄弟组件等等，我们对于组件之间的变量传递，也就是组件通信，要能够熟练操作。

其中父级变量传给子集变量是比较简单的，只要将父级的变量通过v-bind的形式（简写：）绑定在子组件上，然后子组件通过props获取到变量，接着就可以直接使用了。
子级的变量传递给父级有两种方法，一种是使用this.$emit，一种是使用ref。
兄弟之间传递变量也有两种方法，一种是子集的变量先传递给父亲，再由父亲传递给相应的子级。一种是使用数据共享中心bus，但要注意，bus要先进行实例化

生命周期的话，其中created、mounted和updated是我们用的比较多的