vue 重温一下vue运行生命周期，与分子组件事件分发

最新推荐文章于 2022-08-30 13:07:59 发布

花村大地主

最新推荐文章于 2022-08-30 13:07:59 发布

阅读量3.9k

点赞数 1

分类专栏： vue-js

本文链接：https://blog.csdn.net/jayhkw/article/details/75669822

版权

vue-js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
使用 v-on 绑定自定义事件
每个 Vue 实例都实现了事件接口 (Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

这是来自官方文档的api说明

子组件要触发父级作用域（父组件）的methods 里面的函数方法？？

即，在子组件上，绑定自定义方法.如： v-on:kiss = “kissEvent”

这里的kiss，就是事件名，kissEvent 就是父级中的函数名

<div id="app" data-col="kfds">
    <h2>{{name}}</h2>
    <input type="text" v-model="name">

    <test-com :name="name" v-on:kiss="kissEvent"></test-com>
    <test-com></test-com>
    <test-com></test-com>
</div>

然后在component组件中，采用$emit 择机触发:

Vue.component('test-com',{
        template : '<div><div class="kiss" @click="runtip">{{ifcc}}</div><p @click="news(name)">{{name}}</p></div>',
        props : {
            name : String
        },
        data () {
            return {
                ifcc : 1
            }
        },
        methods:{
            runtip () {
                this.ifcc++
            },
            news(v){
                this.$emit('kiss')
            }
        },
        computed : {
            ifcce () {
                return this.name + this.ifcc
            }
        }
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-api</title>
    <script src="vue.js"></script>
    <style>
        span {margin: 0 10px;display: inline-block; width: 120px; line-height: 1.5;color: #666}
        .kiss{
            display: inline-block;
            background: #ddd;
            border: 1px solid #ccc;
            padding: 5px 15px;
        }
    </style>
</head>
<body>
<h1>vue - api</h1>
<div id="app" data-col="kfds">
    <h2>{{name}}</h2>
    <input type="text" v-model="name">

    <ul>
        <li v-for="it of list">
            <span>code:{{it.code}}</span>
            <span>name:{{it.name}}</span>
            <span>selected:{{it.selected}}</span>
        </li>
    </ul>

    <test-com :name="name" v-on:kiss="kissEvent"></test-com>
    <test-com></test-com>
    <test-com></test-com>
</div>
<script>
    Vue.component('test-com',{
        template : '<div><div class="kiss" @click="runtip">{{ifcc}}</div><p @click="news(name)">{{name}}</p></div>',
        props : {
            name : String
        },
        data () {
            return {
                ifcc : 1
            }
        },
        methods:{
            runtip () {
                this.ifcc++
            },
            news(v){
                this.$emit('kiss')
            }
        },
        computed : {
            ifcce () {
                return this.name + this.ifcc
            }
        }
    });


    const app = new Vue({
        data : {
          name : "粮草",
          list : "",
        },

        watch : {
            name : function (val,old) {
//                console.log("watch hook",val,old)
            },
            list : function (val) {
//                console.log("watch list",val)
            }
        },

        methods : {
            add : function () {
                console.log("事件配置：add事件")
            },
            fetchData () {
                var self = this;
                var xhr = new XMLHttpRequest();
                xhr.open('get','http://10.148.60.223/api/account/preferences/lang');
                xhr.onreadystatechange = function () {
                    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
                        console.log(xhr)
                        self.list = JSON.parse(xhr.responseText)
                    }
                };
                xhr.send();
            },

            kissEvent () {
                console.log("fdsfdsfds")
            }
        },


        /**
         * vue 钩子
         * --------------------------------------------------------------------------------------
         */

        //钩子,在  data数据挂载到this根节点上之前，以及methods所有方法挂载到实例根节点之前
        beforeCreate () {
            console.log("1.beforceCreate hook");

            try {
                console.log(this.name);         //测试undefined
                this.add();                     //this.add is not a function
            }catch (e){
                console.log(e)
            }

        },

        //created 钩子  data,methods里面的这些events挂载完成,并且vue内容event，都初始化完成
        created () {

            console.log("2.created hook");
            console.log(this)
            try {
                console.log(this.name);         //测试undefined
                this.add();                     //this.add is not a function
                this.fetchData();
            }catch (e){
                console.error(e)
            }

        },

        //beforeMount 钩子,开始挂载已经编译完成的html,到对应的dom节点时触发的钩子函数, 而html还没有渲染到dom中,只是准备开始渲染了
        beforeMount() {
            console.log("3.beforeMount hook");
        },

        //mounted 钩子, 模板或者html编译完成,且渲染到dom中完成,可以做一些xhr数据, 在整个vue的生命周期中只执行一次
        //在发送xhr后回调操作 不依赖dom的，推荐把xhr放到created生命中
        mounted () {
            console.log("4.mounted hook");
        },

        //数据发生变化后，更新之前
        beforeUpdate () {
            console.log("5.beforeUpdate hook")
        },

        //数据发生变化后，更新视图完成后
        updated () {
            console.log("6.updated hook");
            var self = this;

        },

        //实例销毁前
        beforeDestroy () {
            console.log("7.beforeDestroy hook")
        },

        //实例销毁后
        destroyed(){
            console.log("8.destroyed hook")
            console.log(this)
        }

    });

    app.$mount('#app');

</script>
</body>
</html>

花村大地主

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 重温一下vue运行生命周期，与分子组件事件分发

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！使用 v-on 绑定自定义事件每个 Vue 实例都实现了事件接口 (Events interface)，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件这是来自官方文档的api说明子组件要触发
复制链接

扫一扫

专栏目录