Vue中生命周期钩子函数以及组件之间传值

作者: IF_123 | 来源:发表于2019-03-20 22:18 被阅读0次

与Vue.js的第八天
VUE组件（传值，生命周期）
react基础
Vue3.x中的生命周期和钩子函数（部分）
vue父子组件的生命周期
😄--前端面试整理--VueJs
2018-09-23组件通信及生命周期
Vue中生命周期钩子函数以及组件之间传值
Vue父子组件生命周期执行顺序
Vue.js 父子组件传值 . 兄弟组件传值

一什么是生命周期钩子？

生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。从初始化开始到它被破坏时，对象都会遵循不同的生命阶段。
我们可以使用生命周期钩子在Vue对象生命周期的不同阶段添加我们的自定义代码。它将帮助我们控制在DOM中创建对象时创建的流程，以及更新和删除对象。

图片.png

beforeCreate

Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。

Created（具有默认特性的对象）

在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

beforeMount（对象在DOM中适合形状）

这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。

Mounted（DOM已准备就绪并放置在页面内）

一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。

beforeUpdate（更改已完成，但尚未准备好更新DOM）

在外部事件/用户输入beforeUpdate发生更改时，此钩子即在反映原始DOM元素的更改之前被触发。

Updated（在DOM中呈现的更改）

然后，通过实际更新DOM对象并触发updated，屏幕上的变化得到呈现。

beforeDestroy（对象准备死掉）

就在Vue对象被破坏并从内存中释放之前， deforeDestroy 钩子被触发，并允许我们在其中处理我们的自定义代码。

Destroyed（对象停止并从内存中删除）

该 destroyed 钩子被成功运行销毁对象上调用。

<!DOCTYPE html>
<html>
<head>
    <title>钩子函数</title>
    <meta charset="utf-8">
    <script src="./lib/vue.js"></script>
<body>

<div id="app">
    <p>{{ message }}</p>
    <input type="button" @click="change" value="更新数据" />
    <input type="button" @click="destroy" value="销毁" />
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message : "Welcome Vue"
        },
        methods:{
            change() {
                this.message = 'Datura is me';
            },
            destroy() {
                app.$destroy();
            }
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂在的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前状态2");
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

图片.png

点击更新数据

图片.png

点击销毁之后此实例已不存在

图片.png

二组件之间传值

组件：组件是可复用的 Vue 实例，且带有一个名字，每个组件必须只有一个根元素，data必须是一个函数。
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

图片.png

1.父组件通过Prop向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。可以用一个 props 选项将需要传递的数据包含在该组件可接受的 prop 列表中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <counter :step1="2"></counter>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        Vue.component('counter',{
           template:`<button @click="plusHandle">当前计数值: {{count}}</button>` ,
           data(){
               return {
                   count:1,
                   step:1
               }
           },
           methods: {
               plusHandle(){
                   this.count+=this.step1
               }
           },
           props:['step1']
        })
        var app=new Vue({
            el:'#app',
        })
    </script>
</body>
</html>

2.子组件向父组件传值使用事件派发

在子组件内部使用this.$emit派发事件
在父组件中使用@(v-on)绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h5>当前计数器的值为：{{c}}</h5>
        <counter @plusadd="plusAddHandle" :step1="2"></counter>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        Vue.component('counter',{
           template:`<button @click="plusHandle">当前计数值: {{count}}</button>` ,
           data(){
               return {
                   count:0,
                   step:1
               }
           },
           methods: {
               plusHandle(){
                   this.count+=this.step1;
                   this.$emit('plusadd',this.count);
               }
           },
           props:['step1']
        })
        var app=new Vue({
            el:'#app',
            data:{
                c:0,
            },
            methods: {
                plusAddHandle(params){
                    this.c=params;
                }
            }
        })
    </script>
</body>
</html>

3.非父子组件之间的数据传递

为了解决非父子组件之间的传值问题，引入事件总线（EventBus）
在vue中使用一个空白的Vue对象作为一个EventBus,用来做事件的监听和派发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动态组件</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    .nav {
      background-color: deeppink;
      padding: 1.5rem 1rem;
      height: 60px;
    }
    .nav ul {
      margin: 0;
      padding: 0;
    }
    .nav ul li {
      float: left;
      margin: 1.5rem;
      list-style: none;;
    }
    .nav a {
      color: #fff;
      cursor: pointer;
    }
    .nav a.cur {
      color: greenyellow;
    }
    .product {
      border-bottom: 1px solid #ccc;
      padding: 0.2rem 0.5rem;
    }
  </style>
</head>
<body>
  <div id="app">
    <navbar @pagchange="changePageHandle"></navbar>
    <component :is="currentPage"></component>
  </div>
  <script src="./lib/vue.js"></script>
  <script>

    // 事件总线
    // 为了解决非父子组件之间的传值问题，引入事件总线
    //  在vue中使用一个空白的Vue对象作为一个EventBus,用来做事件的监听和派发

    const Nav = {
      template:  `
      <div class="nav">
        <ul>
          <li><a :class="this.selIndex==0? 'cur': ''" @click="navClick(0, 'Home')">首页</a></li>
          <li><a :class="this.selIndex==1? 'cur': ''" @click="navClick(1, 'List')">商品列表页</a></li>
          <li><a :class="this.selIndex==2? 'cur': ''" @click="navClick(2, 'Cart')">购物车【{{cartCount}}】</a></li>
          <li><a :class="this.selIndex==3? 'cur': ''" @click="navClick(3, 'Us')">关于我们</a></li>
        </ul>
      </div>
      `,
      data() {
        return {
          selIndex: 0,
          cartCount: 0
        }
      },
      methods: {
        navClick(index, page) {
          this.$emit('pagchange', page); // 子组件传值到父组件
          this.selIndex = index
        }
      },
      created() {
        this.$eventBus.$on('addToCartEvent', (id) => { 
          console.log(id);
          console.log(this);
          this.cartCount += 1;
        })
      }
    }
    const Home = {
      template: `
      <div>
        <h1>我是首页</h1>
      </div>
      `
    }
    const List = {
      template: `
      <div>
        <div v-for="item in products" class="product">
          <h3>{{item.name}}</h3>
          <p>{{item.price}}<button @click="addToShopCart(item.id)">加入购物车</button></p>
        </div>
      </div>
      `,
      data() {
        return {
          products: [{
            id: 1,
            name: 'iphone18',
            price: 19999,
          }, {
            id: 2,
            name: 'vivo 32',
            price: 5200
          }, {
            id: 3,
            name: 'redmi 10',
            price: 3000,
          }]
        }
      },
      methods: {
        addToShopCart(id) {
          this.$eventBus.$emit('addToCartEvent', id); // 使用$eventBus对象派发一个事件
        }
      }
    }
    const Cart = {
      template: `
      <div>
        <h1>我是购物车</h1>
      </div>
      `
    }
    const Us = {
      template: `
      <div>
        <h1>关于我们</h1>
      </div>
      `
    }
    var $eventBus = new Vue(); // 使用一个空白的VUE实例作为中间媒介
    Vue.prototype.$eventBus = $eventBus; // 此种定义的属性可以在实例中进行访问
    var app = new Vue({
      el: '#app',
      components: {
        navbar: Nav,
        Home,
        List,
        Cart,
        Us
      },
      data: {
        currentPage: 'Home'
      },
      methods: {
        changePageHandle(page) {
          this.currentPage = page;
        }
      }
    })
  </script>
</body>
</html>

与Vue.js的第八天
今天学习了Vue组件中的非父子之间的传值和生命周期Vue组件之间的传值分三种1.父传子之间传值用属性：props2...
VUE组件（传值，生命周期）
VUE生命周期 VUE子传父组件通信 VUE非父子组件传值
react基础
生命周期相关函数生命周期简单模板组件之间传值父组件向子组件传递信息 >>>主要是通过 prop进行传值...
Vue3.x中的生命周期和钩子函数（部分）
Vue组件化编程中的生命周期，可以理解为组件在不同时间段能执行的不同的函数，这些函数也叫钩子函数。钩子函数...
vue父子组件的生命周期
vue中父子组件渲染，子组件更新，至父组件销毁的生命周期钩子函数触发顺序：beforecreate（父）=> cr...
😄--前端面试整理--VueJs
1、Vue的指令都有哪些？ 2、Vue的生命周期函数 3、除了生命周期函数还有哪些钩子函数 4、Vue组件是怎么进...
2018-09-23组件通信及生命周期
父子组件通信练习：生命周期： Vue的所有钩子函数：beforeCreatecreatedbeforeMount...
Vue中生命周期钩子函数以及组件之间传值
一什么是生命周期钩子？生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。从初始化开始到它被破坏时，...
Vue父子组件生命周期执行顺序
1、vue的生命周期 2、实际操作下面我们在实际的代码执行过程中理解父子组件生命周期创建过程以及钩子函数执行的实...
Vue.js 父子组件传值 . 兄弟组件传值
概述 vue中组件之间的传值传值情况主要有以下三种父组件向子组件传值子组件向父组件传值兄弟组件之间相互传值或者是...

Vue中生命周期钩子函数以及组件之间传值

一什么是生命周期钩子？

beforeCreate

Created（具有默认特性的对象）

beforeMount（对象在DOM中适合形状）

Mounted（DOM已准备就绪并放置在页面内）

beforeUpdate（更改已完成，但尚未准备好更新DOM）

Updated（在DOM中呈现的更改）

beforeDestroy（对象准备死掉）

Destroyed（对象停止并从内存中删除）

二组件之间传值

1.父组件通过Prop向子组件传递数据

2.子组件向父组件传值使用事件派发

3.非父子组件之间的数据传递

相关文章

与Vue.js的第八天

VUE组件（传值，生命周期）

react基础

Vue3.x中的生命周期和钩子函数（部分）

vue父子组件的生命周期

😄--前端面试整理--VueJs

2018-09-23组件通信及生命周期