vue父子组件通信的书写方式及ui组件的显示隐藏

**子组件**
<template>
  <div class="box">  
    <p>props_number:{
    
    {
    
    props_number}}</p>
    <p>props_string_number:{
    
    {
    
    props_string_number}}</p>
    <p>props_boolean:{
    
    {
    
    props_boolean}}</p>
    <p>props_must:{
    
    {
    
    props_must}}</p>
    <p>props_obj_arr:{
    
    {
    
    props_obj_arr}}</p>
    <p>props_function:{
    
    {
    
    props_function}}</p>
    **判断按钮组件显示隐藏**
    <button @click="childpassBtn"  v-show="props_n">子传父:</button>
    <button @click="childpassBtn" v-show="props_num">子传父通:</button>
    <button @click="childpassBtn" v-show="props_numbe">子传父通信:</button>
  </div>
</template>
 export default {
    
    
    name: "child",
    props: {
    
    
      props_n:{
    
    
         type: Boolean,
        default: true
      },
       props_num:{
    
    
        type: Boolean,
        default: true
      },
       props_numbe:{
    
    
         type: Boolean,
        default: true
      },
      // 必须是数字类型
      props_number: Number,
      // 必须是数字或者字符串
      props_string_number: [String, Number],
      // 必须是布尔值，如果没有定义，默认值就是true
      props_boolean: {
    
    
        type: Boolean,
        default: true
      },
      // 必须是数字，而且必须传递
      props_must: {
    
    
        type: Number,
        required: true
      },
      // 如果时数字或者对象，默认值必须时一个函数来返回
      props_obj_arr: {
    
    
        type: Array,
        default() {
    
    
          return [1, 2]
        }
      },
      // 自定义一个验证函数
      props_function: {
    
    
        validate(value) {
    
    
          return value > 20
        }
      }

    },
    methods:{
    
    
    childpassBtn: function(index) {
    
    
    **子组件传递数据给父组件**
    //$emit的第一个为传的参的名字，第二个为传的值
        this.$emit("passtoparent",'你好世界');
     },
   }
  }

**父组件**
<template>
    <div>
         <child :props_number="10"
           :props_string_number="message"
           :props_boolean="false"
           :props_obj_arr="[1,2,3]"
           :props_must="30"
           :props_function="20"
           v-on:passtoparent="clickmessage" //父组件接受子组件传过来的数据，passtoparent必须跟子事件方法一样
           :props_n="props_n"
           :props_num="props_num"
           :props_numbe="props_numbe" >
    </child>
    
    </div>
</template>
**引入子组件**
<script>
import child from '../components/props-chlid'
export default {
    
    
    data(){
    
    
        return{
    
    
            message:'你好世界',
            props_n:false, **传递数据显示隐藏**
            props_num:true,
            props_numbe:false



        }
    },
    mounted () {
    
    
   
    },
    **组件模板**
    components: {
    
    
       child 
    },
    methods: {
    
    
    **拿取数据**
        clickmessage(data){
    
    
            console.log(data)
        }
    }
}
</script>