vue父组件传递方法给子组件,vue父组件给子组件传数组

　　本文主要介绍vue中父子组件的参数传递和应用实例，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

1.在父组件中调用子组件，父亲传值给子组件

　　子组件如下：将要传递给父亲的值放在props中。

　　模板

　　！-底部导航-

　　div class=index-bbar

　　ul class=flex

　　 li v-for=(item，index)in liAry :class= index==Li current？活动“:”。

　　router-link :to=item.linkURl

　　span class= flex alignc flexdc

　　img :src=index==licurrent？要求(././ item.urlActive):require(././ item . URL class= img 1 span { { item . title } }/span

　　/span

　　/路由器链接

　　/李

　　/ul

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：底部，

　　data () {

　　返回{

　　}

　　},

　　道具：[liAry ， licurrent]，

　　方法：{

　　}

　　}

　　/脚本

　　样式范围

　　@导入././assets/public/CSS/top . CSS ；

　　@导入././assets/public/CSS/bottom . CSS ；

　　/风格

　　父组件的调用三部曲

　　首先，介绍子组件。

　　从“@/components/public/Bottom”导入Bottom；

　　组件被注入组件。

　　组件：{Bottom}

　　在父亲中的应用

　　模板

　　Bottom v-bind:liAry= Li data v-bind:Li current= guide current /Bottom

　　/模板

　　在这里，是吗，小偷？

2.子组件传值给父组件

　　父组件在组件上定义了一个自定义事件childFn，事件名为parentFn，用于接受子组件传递的消息值。

　　！-父组件-

　　模板

　　测试

　　test-com @ child fn= parent fn /test-com

　　br/

　　子组件的值：{{message}}

　　/div

　　/模板

　　脚本

　　导出默认值{

　　//.

　　数据：{

　　消息：“”

　　},

　　方法：{

　　parentFn(有效负载){

　　this.message=有效负载；

　　}

　　}

　　}

　　/脚本

　　子组件是一个按钮按钮，一个click事件被添加到其中。单击时，$emit()用于触发事件并将消息发送到父组件。

　　！-子组件-

　　模板

　　div class=testCom

　　输入类型=text v-model=message /

　　按钮@click=click 发送/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　//.

　　data() {

　　返回{

　　//默认

　　消息：“我是来自子组件的消息”

　　}

　　},

　　方法：{

　　单击(){

　　这个。$emit(childFn ，this . message)；

　　}

　　}

　　}

　　/脚本

　　当子组件将值传递给父组件时，Router-link不可用，否则父组件定义的功能将不被接受。

　　以上是vue中亲子组件的参数传递细节和应用实例。更多关于vue中亲子组件参数传递的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。