利用props实现子传父组件

App.vue

2. <template>
3. <componentA/>
4. </template>
5. <script>
6. import componentA from './components/componentA.vue';
7. export default{
8.   components:{
9.     componentA
10.   }
11. }
12. </script>

复制代码

componentA.vue

2. <template>
3.     <div>
4.         <h3>ComponetA</h3>
5.         <p>父元素：{{ message }}</p>
6.         <!-- 自定义函数是父组件的dataFn勇于接收子组件onEvent传递的参数 -->
7. <componentB title="标题" :onEvent="dataFn"/>
8.     </div>
9. </template>
10. <script>
11. import componentB from './componentB.vue';
12. export default{
13.     data(){
14.         return{
15.             message:""
16.         }
17.     },
18.   components:{
19.     componentB
20.   },
21.   methods:{
22.     dataFn(data){
23.       // 父组件接收子组件传递过来的数据
24.         this.message=data
25.     }
26.   }
27. }
28. </script>

复制代码

componentB.vue

2. <template>
3.     <div>
4.         <h3>componentB</h3>
5.         <p>{{ title }}</p>
6.         <!-- 这个‘传递数据’是子组件传给父组件的数据 -->
7.         <p>{{ onEvent('传递数据') }}</p>
8.     </div>
10. </template>
11. <script>
12. export default{
13.     data(){
14.         return{
16.         }
17.     },
18.     // 接收父组件的数据
19.     props:{
20.         title:String,
21.         onEvent:Function
22.     }
23. }
24. </script>

复制代码