Vue- 子父级组件之间的数据传递

Posted 2020-11-24 abdusalam10

父组件 向 子组件 传递数据

 1 Parent.vue 文件
 2 
 3 <template>
 4   <div>
 5     <h2>Parent Component</h2>
 6     <p>
 7       <Child :ParentToChild="ParentToChildMsg" />
 8     </p>
 9   </div>
10 </template>
11 
12 <script>
13   import Child from ‘./Child‘
14   export default {
15     name: "Parent",
16     data() {
17       return {
18         ParentToChildMsg:"这是【父组件】向【子组件】传递的信息",
19       }
20     },
21     components: {
22       Child
23     }
24   }
25 </script>

 1 Child.vue 文件
 2 
 3 <template>
 4   <div>
 5     <h2>Child Component</h2>
 6     <p>{{ParentToChild}}</p>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     name: "Child",
13     data() {
14       return {
15       }
16     },
17 
18     // 接受父组件传递的消息
19     props:{
20       ParentToChild:{
21         type:String,
22         default:""
23       }
24     }
25   }
26 </script>

子组件 接受 父组件 的数据类型有两种
        普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
        引用类型：数组（Array）、对象（Object）

重点
        普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值
        引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。

子组件 向 父组件 传递数据

 1 Child.vue 文件
 2 
 3 <template>
 4   <div>
 5     <h2>Child Component</h2>
 6     <p>
 7       <button @click="ChildToParent">发送</button>
 8     </p>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     name: "Child",
15     data() {
16       return {
17       }
18     },
19 
20     methods:{
21       ChildToParent(){
22         // 向父组件发消息
23         this.$emit("ChildToParentMsg","这是【子组件】向【父组件】传递的信息");
24       }
25     }
26   }
27 </script>

 1 Parent.vue 文件
 2 
 3 <template>
 4   <div>
 5     <h2>Parent Component</h2>
 6     <p>
 7       <Child @ChildToParentMsg="handleChildToParentMsg"/>
 8     </p>
 9   </div>
10 </template>
11 
12 <script>
13   import Child from ‘./Child‘
14 
15   export default {
16     name: "Parent",
17     data() {
18       return {
19       }
20     },
21     components: {
22       Child
23     },
24     methods:{
25       // 接受子组件发送的消息 data
26       handleChildToParentMsg(data){
27         console.info(data)
28       }
29     }
30   }
31 </script>