vue中watch监听值或者form对象以及路由的变化

先说问题，父组件利用props向子组件传值，浏览器

console

有这个值，但是获取不到内部的属性，困了我3个小时，真的

personal

console

以下为原代码

1、homevue（父组件）--personal是被传的参数

<!--子组件-->

<form-picker

class="form-picker"

:personal="personal"

>

</form-picker>

export

default

{

data(){

return{

personal:{

state:'',////判断是修改状态，还是新增状态

add/edit

data:[]

}

}

},

mounted(){

this$apipersonalsearchPersonalInfo(thisuserInfouserId)then((res)=>{

thispersonaldata

=

resdatadata

//这里给personal对象赋值接口传来的数据

})

},

}

2、formPicker

（子组件）

--接收personal

export

default

{

props:['active','personal'],

mounted(){

consolelog(149,thispersonal)

consolelog(150,thispersonalstate)

}

}

运行结果

明明149行有

state

值，150行输出却没有了,是不是超级奇怪

后面经过大佬的讲解，其实浏览器consolelog也是应该没有的

所以，其实我们子组件一开始根本就没有取到这个personal这个对象。

3、解决方法--使用watch

父组件

export

default

{

data(){

return{

personal:{

state:'',////判断是修改状态，还是新增状态

add/edit

data:[]

}

}

},

mounted(){

this$apipersonalsearchPersonalInfo(thisuserInfouserId)then((res)=>{

//thispersonaldata

=

resdatadata

//这里给personal对象赋值接口传来的数据

//使用以下方法重新赋值，上面方法watch监听不到，具体什么原因，我也不清楚，知道的告知我！谢谢

thispersonal

=

{

data:

resdatadata,

state:

'edit'

}

})

},

}

接下来子组件就能

watch

到

personal

了

子组件

watch:{

personal(newValue,oldValue){

consolelog(181,newValue)

},

/

输出

{

data:

resdatadata,

state:

'edit'

}

/

}

总结

以上所述是小编给大家介绍的解决vue组件props传值对象获取不到的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:vue20

子组件改变props值,并向父组件传值的方法详解vue父子组件间传值(props)vue之父子组件间通信实例讲解(props、$ref、$emit)vue组件中使用props传递数据的实例详解vue父组件向子组件(props)传递数据的方法vue父组件通过props如何向子组件传递方法详解详解vue2父组件传递props异步数据到子组件的问题

如果没学到jquery的情况下：var input_value = documentgetElementById(' in ')value; 如果学了jquery: var input_value = $("#in")val() ;

通常情况下，我们可能会用v-for循环出一堆checkbox，提交数据的时候需要去获取选中的checkbox的value值，之前我的获取方式是给checkbox添加点击事件，这样确实能解决问题，但是总觉得有更好的办法，因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定，难道checkbox不能实现数据双向绑定吗？

呵呵哒，真的可以，我一直都不知道。。。。。。。。。

<input  type="checkbox"  v-model="checkFlag">

data () {

    return {

            checkFlag: true    //checkbox默认选中

    }

}

上面是最简单的用法，那如果使用场景是：购物车里循环遍历了所有用户添加的商品，用户选中一些商品，去结算，我们需要在结算的时候获取所有选中的checkbox的value值；

页面的大概效果如下：

这里我们给checkbox绑上了v-model的属性，以及value属性，checkedArr是一个数组，用来放选中的itemname，当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化；

强调最重要的一点，v-model会在checkbox选中的时候，自动将当前的value值push进数组；在取消checkbox的时候，自动将当前的value值pop出数组。

以下是依次选中四个商品，然后取消商品4，打印的checkedArr的值

至于全选按钮什么时候选中，那我们可以watch一下checkedArr：

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div> 中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div> 之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template> 标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template> 标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

mainjs

设置请求头

headers: {'content-type':'application/x->

写个简单的吧

aphp

<form method="post" action="bphp">

<input type="text" name="test" value="">这是你要提交的数据

<input type="submit" value="提交">

</form>

点击提交按钮就跳到b页面了

bphp

echo $_POST['test']；

打印a提交过来的数据，如果有数据你就自己写sql语句存入数据库就好了

以上就是关于vue中watch监听值或者form对象以及路由的变化全部的内容，包括:vue中watch监听值或者form对象以及路由的变化、vue报错streammusthavedata、解决vue组件props传值对象获取不到的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！