vue组件传值

1. 计算属性和方法的区别：计算属性中不会添加重复内容；方法添加会重复添加
2. 生命周期中的销毁：普通的显示隐藏v-show并不是销毁,只是将元素隐藏
3. ctrl+j 显示隐藏终端窗口

一、父给子传值（变量）

使用props直接写

1. 在子页面使用props把变量暴露出去（可以是多个变量）

<template>
  <div id="headermenu">
    {{title}}
    <img :src="logo" />//注意src也需要通过绑定！
  </div>
</template>
<script>
export default {
  name: "headermenu",
  props: ["title", "logo"]
};
</script>
<style lang='less'>
</style>

2. 在主页面的data函数中声明要传递的变量，直接使用v-bind绑定到子组件上

 data() {
    return {
      title:"首页",
      logosrc:"https://www.baidu.com/img/baidu_jgylogo3.gif"
    };

绑定到组件上

   <headermenu :title="title" :logo="logosrc"></headermenu>

使用props进行类型约束

1. 同理先在子页面中声明接受值的变量

<template>
  <div id="headermenu">
    {{title}}
    <img :src="logo" />
    {{num}}
  </div>
</template>
<script>
export default {
  name: "headermenu",
  //直接声明
  //props: ["title", "logo"]
  //进行类型约束
  props:{
    title:String,
    logo:String,
    num:Number
  }
};

2. 在主页面（父页面）中声明变量的值并绑定到组件上

<headermenu :title="title" :logo="logosrc" :num="num"></headermenu>

 data() {
    return {
      title:"首页",
      logosrc:"https://www.baidu.com/img/baidu_jgylogo3.gif",
      num:"100"
    };
  }

二、子给父传值（变量）

1. 在父组件中声明一个变量准备接收传进来的值

  <div>{{children}}</div>

2. 通过父给子传值的方式让父元素给子元素传递当前对象VueComponent

    <contentmenu :parent="self"></contentmenu>

其中self是在data中返回的this（VueComponent）

如果不返回，直接拿，vue中的this为

什么是proxy？

摘抄一段主要内容：
Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的

3. 在子组件中定义要接受父组件传来的parent

 props: {
    parent: Object
  }

4. 这样就可以直接在子组件中修改父组件的变量啦

<template>
  <div id="contentmenu">
    <button @click="sendtoBaba">给父亲传</button>
  </div>
</template>
<script>
export default {
  name: "contentmenu",
  props: {
    parent: Object
  },
  methods: {
    sendtoBaba() {
      //prop给父元素传值
      console.log(this.parent);
      this.parent.children = "我刚刚给过你啦！"
    }
  }
};
</script>
<style lang='less'>
</style>

三、父组件执行子组件的方法

1. 父组件通过虚拟dom获取，就可以直接执行子组件的方法

    <contentmenu ref="child"></contentmenu>
    mounted() {
    this.$refs.child.parentexm()
    }
    

2. 子组件中的方法为

parentexm() {
      console.log("父亲也执行我了");
    }

四、子组件执行父组件的方法

1. 同理，因为已经获取过父组件，所以在子组件中直接调用方法

sendtoBaba() {//忽略这个名称，别被误导了这是写上面的东西时用的
      this.parent.giveme();
    }

2. 父组件中的方法为

  methods: {
    giveme() {
      console.log("儿子执行父亲！");
    }
  }

五、事件广播，事件车监听

1. 非父组件传值方法一

2. 监听先于传值（异步）=

3. vue2.0中可以使用 $emit, $on, $off 分别来分发（发送）、监听、取消监听事件。官方明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.

4. //调用$emit 方法
this.$root.eventHub.$emit('你的事件名字', 你的需要传送的数据)

5. 接收方法（注意接收的事件名称要和发送的事件名称一致）
   this.$root.eventHub.$on('你的事件名字', (传送的数据)=>{ handle(yourData) } )
   6.本例中footer和content组件是非父子组件（同级兄弟组件）

1. 新建emit.js文件，在其中引入vue，创建一个空的vue实例

//事件车
import Vue from 'vue';
const vue = new Vue();
export default vue;

2. 在content组建中发送数据

import emit from '../emit/emit.js'
//省略框架……
  methods: {
    sendmsg(){
      //发送广播
      //参数：键值，数据
      emit.$emit("msginfo","你是footer组件哦！")
    }
  }

3. 在footer中接收

<template>
  <div id="footmenu">底部</div>
</template>
<script>
import emit from "../emit/emit.js";
export default {
  name: "footmenu",
  mounted() {
    //自动监听
    emit.$on("msginfo", res => {
      console.log(res);
    });
  }
};
</script>

六、子组件可以直接拿到父组件

  mounted() {
    console.log(this.$parent)
  }

所以在之前子组件给父组件传值的时候就可以直接使用this.$parent，而不是让父组件先把自身传进来