vue組件傳值在組件封裝中的使用

vue組件傳值在組件封裝中的使用

1. 封裝 input

Input.vue 輸入框子組件

<template>
  <div class="Input">
    <label :for="name">{{label}}</label>
    <input
      :type="type" 
      :value="value"
      :placeholder="placeholder"
      :name="name"
       //input 事件 ，$emit 子傳父，當子組件input輸入框中有值輸入時，調用$emit事件方法,將本輸入框中的value值傳入父組件input事件中，從而使父組件獲取輸入的value 值
      @input="$emit('input',$event.target.value)"
    />
  </div>
</template>

<script>
export default {
    //props 中的都是父組件傳遞過來的值，並綁定到上面的input中
  props: {
    type: {type: String,default: "text"},
    value: {type: String},
    placeholder: {type: String},
    name: {type: String},
    label: {type: String}
  },
  data() {
    return {};
  }
};
</script>

@input="$emit('input',$event.target.value)" 當子組件觸發input方法時，調用父組件中的input 方法並傳入子組件中value值

2. Button 按鈕子組件

<template>
  <div class="btn-container">
    <button :disabled="disabled" 
       @click="$emit('click')">
        //當子組件被點擊時 ，調用父組件中的click事件
      <slot></slot>
    </button>
  </div> 
</template>

<script>
export default {
  //props 中的都是父組件傳遞過來的值，並綁定到上面的button中
  props: {
    disabled: {type: Boolean,default: false}
  }
};
</script>

@click="$emit('click')" 當子組件被點擊時，調用父組件中的click點擊事件

3. Login 登陸父組件

<template>
  <div class="login-container">
    <div class="title">用戶登陸</div>
    <form>
        //子組件傳遞過來的input事件中的value值被v-model綁定了
      <InputGroup label="賬號" placeholder="請輸入用戶名" name="username" v-model="user.username"></InputGroup>
      <InputGroup label="密碼" placeholder="請輸入密碼" type="password" v-model="user.password"></InputGroup>
        //子組件傳遞過來的點擊事件調用loginClick方法
      <ButtonGroup :disabled="isDisable" @click="loginClick">登 陸</ButtonGroup>
    </form>
  </div>
</template>

<script>
import InputGroup from "../components/Input";
import ButtonGroup from "../components/Button";
export default {
  components: { InputGroup, ButtonGroup },
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    };
  },
  computed: {
    isDisable() {
      return false;
    }
  },
  methods: {
    loginClick() {
      console.log("點擊了登陸");
      //this.$router.push("/search");
    }
  }
};
</script>