Vue入门之自定义事件$emit-父组件获取子组件的数据

前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。

首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：

Appvue

一般情况下是前端通过调取后端接口，来获取到数据库的数据，后端哪里会把数据库的数据整理成一般是json形式的数据，前端获取到数据后，写上select标签，用v-for来循环option标签，然后点击下拉框就能看到下拉框中的数据选项了。点击下拉框再去过去数据的话交互不好。还有一种是元数据库的 *** 作，据说是前端直接调用数据库，不过用的不多。

你是拿哪个变量接收的返回数据

比如如果你使用变量叫res接收的的话，如果向获取里面的pid的话，针对这条数据，就是

resdata[0]pid

因为data是个数组，虽然这里面只有一个元素

Vue3表单对象固定写死的值可以使用v-model或者v-bind动态获取。首先，可以通过给v-model定义一个绑定值，并且通过定义一个data函数来获取表单中写死的值，然后将其赋值给v-model，这样就可以获取到表单中的固定写死的值了。其次，可以使用v-bind动态绑定表单中的固定值，v-bind可以在表单中绑定一个固定值，并且可以实时获取更新的值，这样就可以获取到表单中的固定写死的值了。

实际项目中我们获取选择的数据的id；这时候

需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性

<template>

<div>

<select

v-model="select"

>

<option

v-for="(a,index)

in

arr"

:key="index"

:value="aid">{{

aname

}}</option>

</select>

<p>您选择的名字的Id是：{{select}}</p>

</div>

</template>

js代码

<script>

export

default

{

data(){

return{

select:'',

arr:[

{id:'1',name:'html'},

{id:'2',name:'css'},

{id:'3',name:'js'},

]

}

}

}

</script>

拓展知识：vue获取id以及重定向路由方法

1获取ID的方法：

let

orderId=this$routequeryid;

2路由重定向方法

this$routerpush(this$routequeryredirect

||

'/login')

以上这篇vue *** 作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vuejs获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法

两种情况1、post后台请求，收不到数据以PHP为例$_POST为空。2、axios，get请求后台获取不到数据。

第一种情况xios会把数据自动转换成json字符串，发送类型：content-type：application/json，后台PHP还是按照multipart/form-data或x->

不会。vuex中watch的使用，在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex，是store模块文件写相关的数据信息。vuex是一个专门为vue，js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

现在我们通过webpack+vue-cli搭建起了一个vue项目的框架，如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢？

通常情况下，我们搭建好的项目目录应该是这样子的

首先需要安装axios，这个会npm的都知道

下一步，在mainjs中引入axios

import axios from "axios";

与很多第三方模块不同的是，axios不能使用use方法，转而应该进行如下 *** 作

Vueprototype$axios = axios;

接着，我们就可以在Appvue中使用axios了

created:function(){ this$axiosget("/seller",{"id":123})then(res=>{ consolelog(resdata); }); }

以上就是关于Vue入门之自定义事件$emit-父组件获取子组件的数据全部的内容，包括:Vue入门之自定义事件$emit-父组件获取子组件的数据、vue下拉框获取数据库数据显示、接口返回这样的数据，vue如何获取data中的数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！