1、父传子
（1）（未使用框架/构建工具）
父传子：通过自定义属性进行传值
1、在父组件使用子组件的时候，给组件添加自定义属性，属性值为传递的数据
2、在子组件通过props接受父组件的数据，props的值是数据，元素是自定义属性
3、使用的时候像data数据一样使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color: skyblue;
}
h2 span:nth-of-type(1){
color: rgb(88, 88, 163);
}
</style>
</head>
<body>
<!--
父传子：通过自定义属性进行传值
1、在父组件使用子组件的时候，给组件添加自定义属性，属性值为传递的数据
2、在子组件通过props接受父组件的数据，props的值是数据，元素是自定义属性
3、使用的时候像data数据一样使用
-->
<div id="app">
<com v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></com>
</div>
</body>
<script src="vue.js"></script>
<script>
Vue.component("com", {
props: ["title"],
template: `
<h2>
{{title}} <br>
<span>{{age}}</span>
</h2>
`,
data() {
return {
age:18
}
},
})
var app = new Vue({
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
}).$mount('#app')
</script>
</html>（2）使用框架/构建工具
1、首先创建一个子组件 例如Com.vue
2、然后在父组件中引入（例App.vue中）引入child.vue文件，并且注册一下组件和应用组件
<template>
<div id="app">
<!-- 应用组件 自定义属性-->
<com :age="age"></com>
</div>
</template>
<script>
import com from "@/components/Com.vue"
export default {
name: 'App',
data() {
return {
age:18
}
},
// 注册组件
components: {
com
}
}
</script>3、在Com.vue中使用props接收数据
<template>
<div>
{{age}}
{{msg}}
</div>
</template>
<script>
export default {
props:["age"],
data() {
return {
msg:"纳米"
}
},
}
</script>
<style scoped>
</style>总结：
1、在父组件中自定义属性进行传值
2、在子组件中通过props进行接收，可以在此设置数据的类型、默认值等
2、子传父
（1）（未使用框架/构建工具）
1、在父组件中定义修改方法，需要传递参数的
2、在使用的子组件的时候通过自定义事件绑定修改方法
3、在子组件里面需要的地方通过this.$emit（“事件名”,子组件数据进行触发事件并传递参数，即可把子组件数据传递父组件里面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<com @change="changett">
</com>
{{tt}}
</div>
</body>
<script src="vue.js"></script>
<script>
// 子组件
Vue.component('com',{
template:`
<div>
<button @click="f1">点击传递数据</button>
<h1 v-text="msg.txt"></h1>
</div>
`,
data() {
return {
msg:{txt:"平安喜乐，万事胜意",name:"mmm"},
age:18
}
},
methods: {
f1(){
this.$emit("change",[this.msg.txt,this.msg.name,this.age])
}
},
})
var app=new Vue({
el:"#app",
data(){
return{
tt:'',
}
},
methods: {
changett(e){
this.tt=e[0]
console.log(this.tt);
}
},
})
</script>
</html>（2）使用框架/构建工具
1、首先创建一个子组件例如Child.vue
2、在父组件中引入子组件
3、在父组件中定义修改方法，需要传递的参数
4、子组件中自定义事件绑定修改方法，并进行事件发射
<template>
<div>
<!-- 绑定方法 -->
<button @click="changett">点击传递</button>
</div>
</template>
<script>
export default {
data() {
return {
msg:"纳米"
}
},
methods:{
changett(){
// 事件发射
this.$emit("change1",this.msg)
}
}
}
</script>
<style scoped>
</style>
总结：
1、子组件中需要以某种方式的方法来触发一个自定义事件（例点击事件）
2、子组件使用this.$emit方法，第一个参数为父组件定义的方法名称change1,第二个参数为传递的值
3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
3、总线传值
总线传值：可以跨组件传值，也可以兄弟组件传值
bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。
vuex适用中大型项目、数据在多组件之间公用的情况。
（1）（未使用框架/构建工具）
1、创建一个空组件对象
2、创建两个组件例如 com com1(使com的数据传到com1中)
3、在com组件中事件发射（bus.$emit），在总线上进行传值
4、在com1中定义一个来接收数据，并且在此进行监听事件（bus.$on）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<com></com>
<com1></com1>
</div>
</body>
<script src="vue.js"></script>
<script>
// 创建一个空组件对象 这就是总线 它不用经过任何配置
var bus=new Vue()//总线本质就是空组件，可以通过总线进行事件发射，也可以在总线上进行事件监听，监听事件触发之后，可以在回调函数取出传递的值⭐⭐⭐⭐⭐
// com 的数据传递到com1中
Vue.component('com',{
template:`
<div>
<h1>{{this.name}}</h1>
</div>
`,
data() {
return {
name:"123"
}
},
mounted() {
// 事件发射,在总线进行传值 后触发事件
// bus.$emit("pass",this.name)
setTimeout(() => {
bus.$emit("pass",this.name)
}, 1000);
},
})
Vue.component('com1',{
template:`
<div>{{title}}</div>
`,
data() {
return {
title:""
}
},
mounted() {
// 监听事件 先绑定事件
bus.$on("pass",event=>{
// event 是this.name
this.title=event
})
},
})
var app=new Vue({
el:"#app",
data:{
}
})
</script>
</html>总线本质就是空组件，可以通过总线进行事件发射，也可以在总线上进行事件监听，监听事件触发之后，可以在回调函数取出传递的值
（2）使用框架/构建工具
1、在main.js中添加一个bus实例,通过把一个vue实例赋于Vue构造函数原型上的一个属性bus
Vue.prototype.bus=new Vue()注意：每个Vue实例都是有$emit和$on方法的，由于bus属性在Vue原型上，根据原型链查找规则，在页面中我们就可以通过 this.bus.$emit 和 *this.bus.$on来进行跨组件通信了
2、创建两个组件（例Com,Coms）
(1)在com中事件发射
<template> <div> <button @click="passmsg">总线传值</button> </div> </template> <script> export default { data() { return { msg:"纳米" } }, methods:{ passmsg(){ this.bus.$emit("pass",this.msg) } } } </script> <style scoped> </style>（2）在Coms中事件监听事件，接受传过来的数据
<template> <div> --{{title}}--- </div> </template> <script> export default { data() { return { title:"" } }, mounted() { // this.bus.$on("pass",event=>{ // this.title=event // }) // this.bus.$on("pass",function(event){ this.title=event }.bind(this)) }, } </script> <style scoped> </style>（3）在App.vue中引入两个组件，注册组件文件 应用组件文件