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>

vue组件传值在组件封装中的使用

原文：https://www.cnblogs.com/qiaoyurensheng/p/12861773.html