1.14、vue 父子组件的传值

十四、vue 父子组件的传值

子组件
<template>
  <view>
    <div>{{mode}}</div>
    <div>{{name}}</div>
  </view>
</template>
<script>
export default {
        name: 'UniDrawer',
        props: {
            /**
             * 显示模式（左、右），只在初始化生效
             */
            mode: {
                type: String,
                default: ''
            },
      name: {
                type: String,
                default: ''
            } 
    } 
 }      
</script>

父组件
<template>
   <view>
     <uni-drawer :mode="mode" :name="name"></uni-drawer>
    
   </view>
</template>
<script>
    import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
    export default {
        components: {
            uniDrawer
        },
        data() {
        return {
           mode:"模式",
           name:"小明"
        };
    }
  }
</script>  

6.子组件调用父组件的方法

父组件
<template>
  <div>
    <child @fatherMethod="fatherMethodOther"></child>
  </div>
</template>
<script>
  import child from './child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethodOther(str) {
        console.log(str);
      }
    }
  };
</script>

子组件
<template>
  <div>
    <button @click="childMethod">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
     this.$emit('fatherMethod', 'hello');  //fatherMethod就是父组件的HTML标签中的@fatherMethod
      }
    }
  };
</script>