vue具体组件的获值API方法实例

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

概述

Vue中常见的组件有以下几种：

1. 基础组件（Base Components）：例如按钮（Button）、输入框（Input）、下拉菜单（Select）等。

2. 表单组件（Form Components）：例如表单（Form）、表单项（FormItem）、复选框（Checkbox）、单选框（Radio）等。

3. 列表组件（List Components）：例如列表（List）、列表项（ListItem）、分页（Pagination）等。

4. 弹窗组件（Modal Components）：例如对话框（Dialog）、提示框（Alert）、确认框（Confirm）等。

5. 导航组件（Navigation Components）：例如导航栏（Navbar）、标签页（Tabs）、面包屑（Breadcrumb）等。

6. 图表组件（Chart Components）：例如折线图（Line Chart）、柱状图（Bar Chart）、饼图（Pie Chart）等。

7. 布局组件（Layout Components）：例如容器（Container）、栅格布局（Grid）、分割线（Divider）等。

需求：

设计思路

实现思路分析

对于获取组件中的数值，可以通过 Vue 提供的一些 API 来实现。以下是一些常用的 API：

1. v-model：用于双向绑定组件的值，可以在组件外部直接通过 v-model 绑定组件的值，如：<Input v-model="inputValue" />。

2. $emit：用于在组件内部触发自定义事件，并传递参数，可以在组件外部通过监听组件的自定义事件来获取数值，如：<Input @change="handleChange" />。

3. ref：用于给组件指定一个唯一的引用标识，可以通过 $refs 来访问组件实例，并获取组件的属性和方法，如：<Input ref="inputRef" />，然后可以通过 this.$refs.inputRef 来获取组件实例。

4. computed：用于定义可以根据组件的状态动态计算的属性，可以在组件外部直接获取计算属性的值，如：<p>{{ fullName }}</p>，其中 fullName 是一个计算属性。

这只是一些常用的 API 示例，实际使用时还可以根据具体需求来选择合适的 API。
如下我们讨论下基本的控件方法如，基础组件，表单组件，列表组件的取值方法：

1.Button

在Vue中，可以通过v-model指令来在按钮组件上获取数值。

首先，你需要在Vue实例中定义一个数据属性来存储按钮的数值。例如：

data() {
  return {
    value: ''
  }
}

然后，在按钮组件上使用v-model指令来绑定value属性。例如：

<button v-model="value">按钮</button>

现在，当用户点击按钮时，Vue会自动将按钮的值更新到value属性中。

你可以通过访问this.value来获取当前按钮的数值。

console.log(this.value);

请注意，这只适用于提供了value属性的按钮组件，如原生的HTML按钮。如果你在自定义按钮组件中想要获取数值，你需要在组件中定义一个props属性，并在点击按钮时通过$emit方法来传递数值。

3.vue Input

在Vue中获取Input组件的值可以使用v-model指令来实现。

例如，假设有一个Input组件的代码如下：

<template>
  <input type="text" v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

可以通过在父组件中使用v-model将inputValue绑定到父组件的数据上，然后就可以通过访问父组件的数据来获取Input组件的值。

例如，父组件的代码如下：

<template>
  <div>
    <Input v-model="inputValue" />
    <button @click="handleClick">获取值</button>
  </div>
</template>

<script>
import Input from './Input.vue'

export default {
  components: {
    Input
  },
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClick() {
      console.log(this.inputValue)
    }
  }
}
</script>

在点击"获取值"按钮时，可以通过访问inputValue的值来获取Input组件的值。

4.Vue Select

要获取Vue Select组件的值，可以使用v-model指令绑定一个变量，并在需要的时候读取该变量的值。

首先，在Vue实例中定义一个变量来保存Select的值：

data() {
  return {
    selectedValue: ''
  }
}

然后，在Select组件中使用v-model指令绑定这个变量：

<select v-model="selectedValue">
  <!-- options -->
</select>

现在，可以在Vue实例中的任何地方读取selectedValue变量的值：

// 读取Select的值
console.log(this.selectedValue);

记住，如果你使用了多选的Select组件，selectedValue变量将会是一个数组，你可以通过遍历该数组来获取每个选中的值。

5.Form

在Vue中，可以通过v-model指令来实现双向数据绑定，从而获取和修改控件的值。使用v-model指令可以方便地将表单控件的值绑定到Vue实例的数据属性上。

以下是一个使用v-model指令来获取和修改控件值的示例：

<template>
  <div>
    <input type="text" v-model="name" />
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
  methods: {
    submitForm() {
      console.log(this.name); // 获取输入框的值
      // 执行其他逻辑
    },
  },
};
</script>

在上面的示例中，我们使用v-model指令将输入框的值绑定到了name属性上，当用户输入内容时，name属性的值会自动更新。在submitForm方法中，我们可以通过this.name来获取输入框的值，进行进一步的处理。

6.Radio

在Vue中，我们可以使用v-model指令来双向绑定表单元素的值。对于Radio组件，可以使用v-model来绑定一个变量，然后通过该变量来获取选择的值。

以下是一个简单的例子：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>

在上面的例子中，我们使用了两个radio按钮和一个p标签来展示选择的值。通过v-model指令，我们将这两个radio按钮绑定到selectedOption变量上。当用户选择其中一个radio按钮时，selectedOption的值会相应地更新，然后我们可以通过插值语法将选中的值展示出来。

在实际的应用中，你可以根据需要自定义Radio组件来实现更复杂的逻辑。例如，你可以使用props属性来接收外部传递的选项列表，然后根据选项列表动态地生成radio按钮，并将选择的值通过$emit方法传递给父组件。

7.vue 日期 组件

要获取Vue日期组件的值，您可以使用v-model指令将日期绑定到Vue实例的一个属性上，然后通过该属性来获取日期的值。

首先，在Vue组件的data属性中定义一个日期属性，例如selectedDate：

data() {
  return {
    selectedDate: null
  };
}

然后，在日期组件上使用v-model指令将日期绑定到selectedDate属性上：

<date-component v-model="selectedDate"></date-component>

现在，您可以通过this.selectedDate来获取日期组件的值。例如，在提交表单时可以使用：

methods: {
  submitForm() {
    console.log(this.selectedDate);
  }
}

在这个例子中，selectedDate属性将保存日期组件的选定值，并且在submitForm方法中可以通过this.selectedDate来获取这个值。

8. 特殊组件 Switch

在Vue中，可以使用v-model指令和data属性来获取Switch组件的值。

首先，在Switch组件中，使用v-model指令绑定一个data属性，如下所示：

<template>
  <div>
    <el-switch v-model="switchValue"></el-switch>
  </div>
</template>

然后，在data属性中定义一个变量来存储Switch组件的值，如下所示：

<script>
export default {
  data() {
    return {
      switchValue: false
    };
  }
};
</script>

现在，可以通过this.switchValue来获取Switch组件的值。在需要使用Switch组件的地方，可以直接使用this.switchValue来获取其值，如下所示：

<template>
  <div>
    <p>Switch的值为：{{ switchValue }}</p>
    <el-switch v-model="switchValue"></el-switch>
  </div>
</template>

在上面的例子中，通过{{ switchValue }}来展示Switch组件的值。

当Switch组件的值发生变化时，this.switchValue的值也会随之改变，可以在其他地方使用这个值进行相应的逻辑处理。

总结一下，其实绝大部分的组件都是可以用使用v-model指令来获取的。

参考资料和推荐阅读

参考资料
官方文档
开源社区
博客文章
书籍推荐

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！同时，期望各位大佬的批评指正~，如果有兴趣，可以加文末的交流群，大家一起进步哈