基于Vue中的父子传值问题解决

主题是Vue中几种常见的传值方法。。。先写个父子传值吧

vue-cli构建项目目录,噜啦啦,这个就不用说了吧。

接着创建父子组件,父组件Father.vue,子组件Son.vue(随意起名,开心就好),然后在父组件中引入子组件,创建一个父组件的路由。车门已经焊死了,请继续往下看

1.父传子

Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上)


 

Son.vue(在子组件中用props方法接收父组件传来的值,两种方法,具体用哪种看个人喜好,推荐第二种)


 

效果图:

2.子传父

Son.vue(在子组件中创建一个按钮,定义一个点击事件,点击事件里用this.$emit方法触发一个自定义事件,并传递一个参数)


 

Father.vue(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法,将接收到的值赋给data中的sendSonMessage)


 

效果图:

基于Vue中的父子传值问题解决_第1张图片

补充知识:在vue中的for循环,我经常用这两种方法

1、

for(let item of response.data.result) {

用item操作每一条数据。
}

item:定义的每一条的变量

response.data.result:要循环的数组

2、

response.data.result.forEach((item, index) => {

用item操作每一条数据。
})

response.data.result:要循环的数组

index:索引

以上这篇基于Vue中的父子传值问题解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(基于Vue中的父子传值问题解决)