一、组件传值的三种情况
我们可以把组件之间的数据传递分为三种情况：
- 父级向子级传递数据
- 子级向父级传递数据
- 非父子级传递数据
二、父级向子级传值
父级可以通过属性向自己传递数据，示例代码如下所示：
代码语言：javascript复制 1 <!-- 父级 -->
2 <template>
3 <div>
4 <Child :msg="message"></Child>
5 </div>
6 </template>
7
8 <script>
9 import Child from "./components/Child.vue";
10 export default {
11 // 注册组件
12 components:{Child},
13 data(){
14 return {
15 message:"hello child"
16 }
17 }
18 }
19 </script>
20
21 <!-- 子级 -->
22 <template>
23 <h1>{{msg}}</h1>
24 </template>
25
26 <script>
27 export default {
28 props:["msg"]
29 }
30 </script>1.创建子组件，在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props，然后创建一个名为message的属性
三、子级向父级传值
子级想父级传递数据需要用自定义事件。
代码语言：javascript复制 1 <!-- 子级组件 -->
2 <template>
3 <button @click="sendData">sendData</button>
4 </template>
5
6 <script>
7 export default {
8 data(){
9 return {
10 message:"hello father"
11 }
12 },
13 methods:{
14 sendData(){
15 this.$emit("sendData",this.message);
16 }
17 }
18 }
19 </script>在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
代码语言：javascript复制 1 <!-- 父级组件 -->
2 <template>
3 <div>
4 <h1>子级的数据为：{{message}}</h1>
5 <Child @sendData="sd"></Child>
6 </div>
7 </template>
8
9 <script>
10 import Child from "./components/Child.vue";
11 export default {
12 // 注册组件
13 components: { Child },
14 data() {
15 return {
16 message: ""
17 };
18 },
19 methods: {
20 sd(childData) {
21 this.message = childData;
22 }
23 }
24 };
25 </script>四、非父子级组件传值组件传值
在src目录中创建一个store.js文件用来统一存储数据
代码语言：javascript复制 1 //store.js
2 export default {
3 state:{
4 message:"hello vue"
5 },
6 setStateMessage(str){
7 this.state.message = str;
8 }
9 }
10
11 <!-- sister组件 -->
12 <template>
13 <h1>{{state.message}}</h1>
14 </template>
15
16 <script>
17 import store from "../store.js"
18 export default {
19 data(){
20 return {
21 title:"sister组件",
22 state:store.state
23 }
24 }
25 }
26 </script>
27
28 <!-- brother组件 -->
29 <template>
30 <div>
31 <button @click="changeData">change data</button>
32 </div>
33 </template>
34
35 <script>
36 import store from "../store.js"
37 export default {
38 methods:{
39 changeData(){
40 store.setStateMessage("122");
41 console.log(store.state.message)
42 }
43 }
44 }
45 </script>
