父传子
<!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">
<!-- 1. 父组件在子组件的身上定义一个属性即可 -->
{{msg}}
<son desc="哈哈" money="10000" :msg="msg"></son>
</div>
<script src="vue.js"></script>
<script>
/*
1. 父组件在子组件的身上定义一个属性即可
2. 子组件需要指定一个 props 属性
*/
// 组件通讯-父传子
Vue.component('son', {
// data methods computed
template: `
<div>
这是子组件
{{ desc }} ----- {{ money }} ---- {{msg}}
</div>
`,
// 2. 子组件需要指定一个 props 属性
// props的作用和data的作用是一样的，也是用来给组件（实例）提供数据，props的数据接收自父组件
props: ['desc', 'money', 'msg']
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
</script>
</body>
</html>
子传父
<!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">
<!-- 2. 子传父：父组件给子组件注册一个事件（目的：把方法传递给子组件） -->
<son @sb="get"></son>
</div>
<script src="vue.js"></script>
<script>
/*
1. 父组件提供一个方法， 作用：获取数据
2. 父组件给子组件注册一个事件 事件名可以随便取
3. 子组件触发父组件注册的事件即可 （this.$emit）， 可以传递参数
4. 父组件通过形参来获取数据
*/
// 需求：把son组件的 money, car都传递给父组件
Vue.component('son', {
template: `
<div>
<button @click="fn">给父组件传递数据</button>
</div>
`,
data() {
return {
money: 10000,
car: '凤凰'
}
},
methods: {
fn() {
// 3. 子传父： 子组件触发父组件注册的事件（sb）
console.log(111)
// $emit:表示触发当前注册自己的某个事件
this.$emit('sb', this.money, this.car)
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
// 1. 子传父： 父组件提供一个方法
methods: {
get(money, car) {
console.log('来自于我孩子的', money, car)
}
}
})
</script>
</body>
</html>
非父子
<!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">
<jack></jack>
<rose></rose>
</div>
<script src="vue.js"></script>
<script>
/*
1. 创建一个事件总线 bus const bus = new Vue
2. 需要获取数据的组件，rose提供一个方法，用于获取数据
3. 在组件渲染的时候，就给bus注册一个自定义的事件 bus.$on
4. 需要传递数据的组件去触发bus的这个自定义事件
*/
//1. 创建一个事件总线, bus其实就是一个空的vue实例
const bus = new Vue()
Vue.component('jack', {
template: `
<div>
<p>这是jack组件</p>
<button @click="fn">对rose说</button>
</div>
`,
data() {
return {
msg: '你赶紧跳吧！'
}
},
methods: {
fn() {
// console.log('发送给rose', this.msg)
// 4. jack触发bus的get事件
bus.$emit('ss', this.msg)
}
}
})
Vue.component('rose', {
template: `
<div>
<p>这是rose组件</p>
</div>
`,
methods: {
// 2. rose提供了一个方法
get(msg) {
console.log('接收到了jack的消息', msg)
}
},
created() {
// 3. rose在创建的时候，就bus注册一个事件
// 参数1：事件名
// 参数2： 事件处理程序(在上面)
bus.$on('ss', this.get)
}
})
// bus是组件通讯的一种通用解决方案
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
</script>
</body>
</html>
