vue（从白痴到白痴）

一、组件间的通信

1.爷爷与孙子之间的通信。

最近做了一个类似朋友圈的需求。在下做的评论页（上方动态详情，下方评论列表，最底部fixed点赞+评论的编辑框）。如图：

 

妈呀，图太大。

爷爷组件要把点赞信息传给孙子，爷爷→爸爸→孙子。孙子还要改变这个点赞信息。vue父子组件通信需要通过prop，但是呢，子组件没法改这个prop，

a.通过一层一层emit?这样不好,太麻烦了

b.prop赋给一个新属性，但是，这个prop的值爷爷第一次给传了个默认值，爷爷请求接口后又给传了，造成的后果是，虽然prop总是最新的，但是孙子拿到的总是第一次传的。完成不了。

c.一个比较厉害的前端大哥跟我说：我直接把这个信息放到一个对象里传给你吧，这样就可以随意修改了，就好像const一个常量，修改这个常量会报错，但const的是一个对象，修改对象下的属性是不报错的，以此类推，是不是父组件传个object，子组件修改其属性就没问题了呢，试了一把，果然好用这呢，哈哈哈。

二、this指向

<!DOCTYPE html>
<html>
<div id="app" style="width: 100%;height: auto;font-size:20px;">
    <p id="id1"></p>
    <p id="id2"></p>
</div>
<script type="text/javascript">
    var message = "Hello!";
    var app = new Vue({
        el:"#app",
        data:{
            message: "你好！"
        },
        created: function() {
          this.showMessage1();    //this 1
          this.showMessage2();   //this 2
        },
        methods:{
            showMessage1:function(){
                setTimeout(function() {
                   document.getElementById("id1").innerText = this.message;  //this hello
                }, 10)
            },
            showMessage2:function() {
                setTimeout(() => {
                   document.getElementById("id2").innerText = this.message;  //this 你好
                }, 10)
            }
        }
    });
</script>
</html>

a.对于普通函数（包括匿名函数），this指的是直接的调用者，在非严格模式下，如果没有直接调用者，this指的是window。showMessage1()里setTimeout使用了匿名函数，this指向window。

b.箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例。
注：
【普通函数的this】
普通函数的this是由动态作用域决定，它总指向于它的直接调用者。具体可以分为以下四项：
this总是指向它的直接调用者， 例如 obj.func() ,那么func()里的this指的是obj。
在默认情况(非严格模式,未使用 'use strict')，如果函数没有直接调用者，this为window
在严格模式下,如果函数没有直接调者，this为undefined
使用call,apply,bind绑定的，this指的是绑定的对象
posted @ 2018-05-09 16:16  superil  阅读(223)  评论(0)    收藏  举报