vue 常用父子组件通信的几种方式

1. props

   //父组件
   <template>
       <child :content="message"></child>
   </template>
   <script>
       import child from './modal/child'
       export default {
           components: {
               child 
           }
       }
   </script>

   //子组件
   <template>
      <span>{{ content }}</span>
   </template>
   <script>
       export default {
           props: {
               content:{
                   type:Number | String,
                   default:''
               }
           }
       }
   </script>

    

2. $emit()

   //父组件
   <template>
       <div>
         <child @childFn="parentFn"></child>
       </div>
   </template>
   
   <script>
   import child from './modal/child'
   export default {
       components: {
          child 
       },
       data: {
           message: ''
       },
       methods: {
          parentFn(childData) {
           this.message = childData;
         }
       }
   }
   </script>

   //子组件
   <template> 
       <div class="testCom">
           <input type="text" v-model="message" />
           <button @click="click">发送消息给父组件</button>
       </div>
   </template>
   <script>
   export default {
       data() {
           return {
             message: ''
           }
       },
       methods: {
         click() {
               //1、childFn 组件方法名，父组件中用childFn方法接收子组件中的数据；2、message是传递给父组件的数据
               this.$emit('childFn', this.message);
           }
       }    
   }
   </script>

3. ref

   //父组件
   <template>
       <div>
         <child ref="child_demo"></child>
         <button @click="click">发送消息给子组件</button>
       </div>
   </template>
   
   <script>
   import child from './modal/child '
   export default {
       components:{ child },
       data: {
           message: ''
       },
       methods: {
         click(){
           this.$refs.child_demo.childMethods('传给子组件的信息');
         }
       }
   }
   </script>

   //子组件
   <template> 
       <div class="testCom">
           <input type="text" v-model="message" />
       </div>
   </template>
   <script>
   export default {
       data() {
           return {
             message: ''
           }
       },
       methods: {
         childMethods(message) {
               this.message = message
           }
       }    
   }
   </script>

4. $parent和$children

   //父组件
   <template>
       <div>
         <child></child>
          <button @click="click">发送消息给子组件</button>
           <input type="text" v-model="pmessage" />
       </div>
   </template>
   
   <script>
   import child from './modal/child '
   export default {
       components:{ child },
       data: {
           pmessage: ''
       },
       methods: {
         click(){
           this.$children.childMethods('传给子组件的信息');
         },
           parentMethods(message){
               this.pmessage = message
           }
       }
   }
   </script>

   //子组件
   <template> 
       <div class="testCom">
           <button @click="pclick">发送消息给父组件</button>
           <input type="text" v-model="cmessage" />
       </div>
   </template>
   <script>
   export default {
       data() {
           return {
             cmessage: ''
           }
       },
       methods: {
         childMethods(message) {
               this.cmessage= message
          },
           pclick(){
               this.$parent.parentMethods('发送给父组件的信息')
           }
       }    
   }
   </script>

   第四种方式在ui组件中使用无效的情况参考https://blog.youkuaiyun.com/qq_32900003/article/details/107816502