Vue2 组件通信方式

1. 作用：父组件通过 props 向子组件传递数据
2. parent.vue

   <template>
       <div>
           <Son :msg="msg" :pfn="pFn"></Son>
       </div>
   </template>
   
   <script>
   import Son from './son'
   export default {
       name: 'Parent',
       data() {
           return {
               msg:'a message'
           }
       },
       methods: {
           pFn(){
               console.log("这是pFn");
           }
       },
       components:{
           Son
       }
   }
   </script>
   
   <style></style>

3. son.vue

   <template>
       <div>
           <h3>p的msg：{{ msg }}</h3>
           <el-button type="primary" size="default" @click="pfn">点击使用p的方法</el-button>
       </div>
   </template>
   
   <script>
   export default {
       name: 'Son',
       props:['pfn','msg']
   }
   </script>
   
   <style></style>

4. 效果

1. 作用：子组件通过 $emit 和父组件通信
2. parent.vue

   <template>
       <div>
           <Son :msg="msg"  @onSendData="onSendData"></Son>
       </div>
   </template>
   
   <script>
   import Son from './son'
   export default {
       name: 'Parent',
       data() {
           return {
               msg:'a message'
           }
       },
       methods: {
       },
       components:{
           Son
       },
       methods: {
           onSendData(val){
               console.log(val);
           }
       },
   }
   </script>
   
   <style></style>

3. son.vue

   <template>
       <div>
           <h3>p的msg：{{ msg }}</h3>
         <el-button type="primary" size="default" @click="sendData">点击向p发送数据</el-button> 
       </div>
   </template>
   
   <script>
   export default {
       name: 'Son',
       props:['msg'],
       created() {
           console.log(this);
       },
       methods: {
           sendData(){
               this.$emit("onSendData",'data from son')
           }
       },
   }
   </script>
   
   <style></style>

4. 效果

<template>
    <div>
        <Son ref="Son"></Son>
    </div>
</template>

<script>
import Son from './son.vue';
export default {
    name: 'Parent',
    components:{
        Son,
    },
    mounted() {
        console.log("this.$refs.Son",this.$refs.Son.msg);
        this.$refs.Son.sayHi();
    },
   
}
</script>

<style></style>

<template>
    <div>
        <h3>p的msg：{{ msg }}</h3>
    </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            msg:"a message from son"
        }
    },
    methods: {
        sayHi(){
            console.log("hello");
        }
    },
}
</script>

<style></style>