说明：文章会通“.html”结尾的文件去编写Vue相关代码，这样适用于初学者，同时适用于“Vue-Cli”做模块化开发的读者，大同小异。
正文
基础环境代码（v2.6.11非压缩版本，这个并不重要）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = new Vue({
el : '#app',
});
</script>
</html>
1. 父传子数据：props
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<!--这里是关键点： 通过v-bind自定义子属性，来获取父组件的数据 -->
<com1 :p_data="parent_data"></com1>
</div>
</body>
<!-- 声明一个子组件 并使用子组件的数据-->
<template id="template_id">
<div>{{son_data}}</div>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '这是父组件的数据，把当前作为父组件'
},
components : {
com1 : {
template: '#template_id',
data() {
return {
son_data : this.p_data
}
},
//通过props关键字来说明子组件要使用父组件的数据
props : ['p_data']
},
}
});
</script>
</html>
</html>
2. 子传父：$emit()
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{parent_data}}</h1>
<!-- 第3步 父组件的元素接收到子组件要执行emit_func()，便执行了parent_func方法 -->
<!-- 说明：由于是子组件的数据，可以简单理解为：一些操作都要放到子组件间中执行，所以 放到com1标签中，放其它地方作甚？-->
<com1 @emit_func="parent_func"></com1>
</div>
</body>
<template id="template_id">
<!-- 第1步 点击子组件的按钮，触发子组件的方法 -->
<button @click="son_click">按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '',
},
methods : {
//第4步，子组件触发了父组件的这个方法，并传递了值，就可以对数据进行操作。子组件向父组件通信完成
parent_func(son_data) {
this.parent_data = son_data;
}
},
components : {
com1 : {
template: '#template_id',
data() {
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
// 第2步 子组件的方法体会执行$emit()方法，此处可以通俗的理解为，由于Vue内部的机制，子组件向父组件发射通信，告诉父组件用哪个方法接收，并且发射了什么数据，以供父组件操作。
this.$emit('emit_func', this.son_data);
}
}
},
}
});
</script>
</html>
3. 父组件获取子组件属性或方法：$refs
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<!-- 步骤1 父组件中的按钮，点击事件调用了parent_click方法 -->
<button @click="parent_click">父按钮</button>
<!-- 步骤3 检测到test_ref被调用，会查找对应的组件的信息，然后会被调用 -->
<com1 ref="test_ref"></com1>
</div>
</body>
<template id="template_id">
<button >子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
//步骤2 通过$refs对象调用了test_ref元素绑定的属性或者方法。
//$refs对象是关键字，后面跟自定义ref名称
parent_click() {
console.log(this.$refs.test_ref.son_data);
this.$refs.test_ref.son_func();
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_func() {
alert(1)
}
}
},
}
});
</script>
</html>
4. 父组件获取子组件属性或方法：$children （不推荐使用，靠数字下标找对应关系，容易出错）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<button @click="parent_click">父按钮</button>
<com1></com1>
</div>
</body>
<template id="template_id">
<button >子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
parent_click() {
//通过下标找到子组件的数据，一旦子组件数量发生变动，下标就对应不上，造成逻辑错误。
console.log(this.$children[0].son_data);
this.$children[0].son_func();
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_func() {
alert(1)
}
}
},
}
});
</script>
</html>
5. 子组件获取父组件属性或方法：$parent
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
</body>
<template id="template_id">
<button @click="son_click">子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
parent_func() {
alert(1);
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
console.log(this.$parent.parent_data);
this.$parent.parent_func();
}
}
},
}
});
</script>
</html>
6. 子组件获取根组件属性或方法：$root
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
</body>
<template id="template_id">
<button @click="son_click">子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
parent_func() {
alert(1);
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
console.log(this.$root.parent_data);
this.$root.parent_func();
}
}
},
}
});
</script>
</html>
扩展
1：props 的增强写法，对象的形式（约束接收父级的值，父级的值违反约束会报错）。
props :{
test_field : {
type : [Boolean, Number], //这里的不用加引号，若此处是Object则需要default是函数，并且返回一个对象
default : 'default value', //给默认值
required : false, //是否必填
}
}
2. $res：还可操作DOM元素（不推荐使用，因为Vue不推荐操作DOM）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<button @click="getElement">按钮</button>
<div ref="test_ref">div的值</div>
</div>
</body>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
getElement() {
console.log(this.$refs.test_ref.innerText);
}
}
});
</script>
</html>
3：Vuex是专门为Vue官方开发的状态管理模式，可以理解为组件之间数据共享的管家。Vuex也可以作为父子间传值的一种方式，例如通过mutation操作state。
