1.父传子

①props传参与slot插槽
子组件：
script脚本中使用props属性接住父组件传过来的值，如：

<script>
export default {
 props: ['data1','data2'],//data1，data2表示从父组件传过来的值
 name: 'todoItem',
 methods:{

 },
 data() {
  return {

  }
 }
}
</script>

template中使用props属性中的值，如：

<template>
 <li>
 	<!-- 用<slot>插槽插入要表示的数据，数据写在name属性值内 -->
 	<!-- <slot>插槽中的数据只用来显示，不会反复处理 -->
  {{data1+1}} - <slot name = "data2"></slot>
 </li>
</template>

父组件：
template中嵌套子组件时在其子组件中添加 :传递给子组件的值的变量="传递的值"，以及嵌套template插槽传递值
示例代码：
html:

<template>
 <ul>
  <todo-item v-for="(task,i) of tasks" :key="i" :data1="i">
   <template slot="data2">{{task}}</template>
  </todo-item>
 </ul>
</template>

js:

<script>
import todoTtem from './TodoItem'
export default {
 methods:{

 },
 data() {
  return {
   tasks:['疼女朋友','洗澡','看直播']
  }
 }
}
</script>

2.子传父

父组件：
template中嵌套子组件时给其添加自定义事件并绑定事件处理函数，如：
html:

<template>
 <ul>
 	<!-- customEvent为自定义事件的自定义名，del为事件处理函数 -->
  <todo-item v-for="(task,i) of tasks" :key="i" :data1="i" :data2="tasks" @customEvent="del">
   <template slot="task">{{task}}</template>
  </todo-item>
 </ul>
</template>

js:

<script>
import todoTtem from './TodoItem'
export default {
 methods:{
 //data1为子组件传递过来的数据的变量名，作为形参传入del
  del(data1) {
   this.tasks.splice(data1,1);
  }
 },
 data() {
  return {
   tasks:['吃饭','睡觉','打球']
  }
 }
}
</script>

子组件：
template中的某个元素绑定事件及其事件处理函数：
html

<template>
 <li>
  {{data1+1}}-<slot name = "data2"></slot><button @click="sonsDel">x</button>
 </li>
</template>

js:
script中的methods中对应的函数中调用$emit(爹给的自定义事件名,this.子组件中的数据),如：

<script>
export default {
 props: ['data1','data2'],
 name: 'todoItem',
 methods:{
  sonDel() {
   this.$emit(/*爹给的自定义事件名*/'cunstomEvent',this.data1);
  }
 },
 data() {
  return {

  }
 }
}
</script>

3. ref：打通父子之间所有数据和方法的共享方法

使用：

父模板：<child ref="子名称"></child>
父访问子：父组件：this.$refs.子名称.子数据/子方法()
子访问父：子组件：this.$parent.父数据/方法名()

父组件：
嵌套子组件的时候：<child ref="myChild"></child>
js代码:

<script>
export default {
 methods: {
  speak() {
   console.log("父组件的方法被调用了");
  }
 }
}
</script>

调用子组件方法：this.$refs.myChild.study()

子组件：
js代码：

<script>
export default {
 methods: {
  study() {
   console.log("子组件的方法被调用了");
  }
 }
}
</script>

调用父组件的方法：this.$parent.speak();

4.兄弟间

分三步:
①创建"bus"： New Vue()，保存事件，并关联到任何一个组件的处理函数上，类似：

首先：单独建立一个文件叫bus.js，与main.js同一目录下，代码：

import Vue from 'vue'
export default new Vue();

然后：在main.js当中引入bus.js,并给vue的prototype添加"bus"，代码：

import bus from './bus'
Vue.prototype.bus=bus;

②数据的接受方组件：在自己加载完之后，向"bus"上添加一个自定义的事件，事件要绑定上自己的一个处理函数：

       在created钩子函数中调出bus对象，使用$on监听绑定一个自定义的事件名，该事件绑定一个接收方组件的一个事件函数，并注意改变this的指向。代码：

<script>
export default {
 methods:{
  自己的事件处理函数名(data) {//data为接收到的数据
   ...
  //  如：this.tasks.push(data);
  }
 },
 data() {
  return {
   task:[ ]
  }
 },
 created() {
  this.bus.$on("自定义事件名",this.自己的事件处理函数名.bind(this));
 }
}
</script>

③数据传递方组件，在机制的时间处理函数中，找到公共的"bus"对象，用$emit()触发别人提前在"bus"上绑定好的时间，并传参：
在methods中的对应的处理函数中使用 $emit()绑定自定义事件与自己的数据。代码：

<script>
export default {
 data() {
  data:'',//data为发送的数据
 },
 methods:{
  自己的处理函数() {
   this.bus.$emit('自定义事件名',this.data);
   ...
  }
 }
}
</script>

注意： 发送与接收的数据变量名要一致，且自定义事件名一致，因为要绑定到同一个事件名上

其他数据传递的方式：

1.路由传参（params方法、url显示参数）

router.js的配置：

	{
        path: "/two/:id/:data",
        // 跳转的路由后加上/:id，多个参数继续按格式添加，数据按顺序对应
        name: "two",
        component: two
    }

起始界面，准备跳转,假设这里message为123

	data() {
        return {
            message: "123"
        }
    }
    methods() {
        function() {
            this.$router.push({
                path: `/two/${this.message}/456`　　 // 直接把数据拼接在path后面
            });
        }
    }

已经跳转页面接收：

		data() {
            return {
                msg1: "",
                msg2: ""
            }
        },
        created() {
            this.msg1 = this.$route.params.id // 123
            this.msg2 = this.$route.params.data　　 // 456
        }

页面刷新，数据依然在。
url显示，数据显示在url，所以这种方式传递数据仅限于一些不那么重要的参数　　/two/123/456

1.路由传参（params方法、url不显示参数）

router的配置

	{
        path: "/two",
        name: "two",
        component: two
    }

起始界面，准备跳转,假设这里message为123

    this.$router.push({
        name: `two`,
        // 这里只能是name，对应路由
        params: {
            id: this.message,
            data: 456
        }
    });

接收：

    	created() {
            this.msg1 = this.$route.params.id // 123
            this.msg2 = this.$route.params.data　　 // 456
        } // url显示，数据不显示在url　　/two

注意： params方法必须要有name属性。

3.路由传参（query方法）

router的配置

	{
        path: "/two",
        name: "two",
        component: two
    }

起始界面，准备跳转,假设这里message为123

    this.$router.push({
        path: `/two`,
        // 这里可以是path也可以是name（如果是name，name:'two'），对应路由
        query: {
            id: this.message,
            data: 456
        }
    });

接收：

    created() {
        this.msg1 = this.$route.query.id // 123
        this.msg2 = this.$route.query.data　　 // 456
    }

此外：query也有一种十分简单的方法：

4.路由地址中的查询字符串拼接：

router的配置

	{
        path: "/two",
        name: "two",
        component: two
    }

起始界面，准备跳转,假设这里message为123

this.$router.push(`/two?id=1&data=${this.message}`);

接收：

    created() {
        this.msg1 = this.$route.query.id // 123
        this.msg2 = this.$route.query.data　　 // 456
    }

还有其他有关数据传递也可使用vuex等