阿毛Alex - 2021年1月14日
type: channel
link: https://alexmao.com/index.php/2021/01/14/
description: 生命不息，折腾不止
items: Vue组件间传值的问题
items: Vue组件传值碰到的问题
items: 一个最简单的Vue单页结构

Vue组件间传值的问题
type: item
date: 2021-01-14T11:16:00+00:00
description: 传值的教程在这里有些子组件是看不见的，看到不代表他们没有被create，今天我尝试了一个子组件（是个modal），在created里写了一个alert，当我打开父组件时，我发现这个alert被执行了，虽然子组件这个时候根本没有被看见。第一次尝试：将获取post内容的方法写在父组件里，然后传到子组件。问题：传到子组件的post内容是不能编辑的，因此无法使用。第二次尝试：父组件只给子组件传id，在子组件中获取post内容，然后再进行修改。碰到问题：由于打开modal的时候就需要获得post的内容，所以必须要点击edit的时候就触发获得post的方法。所以需要在父组件中调用子组件的方法。setEditPostId (id) { this.editPostId = id this.$refs.EditPostModal.getPostById() } 又碰到问题：每次我点的时候，获取的都是上一个id的内容，也就是说，设置editPostId并传给子组件这个过程，是比调取子组件这个方法要慢一步的，那又应该怎么办呢？似乎应该要让程序等set id并传给子组件这个过程结束了之后，再调用getPostByID这个方法。但是如何做呢？

Vue组件传值碰到的问题
type: item
date: 2021-01-14T09:36:00+00:00
description: 我做了两个组件，父组件是post列表，子组件是一个modal可以编辑选定的post。现在尝试在父组件中获得该post的内容，传到子组件中，编辑后再通过api put到后台。但传过去的数据课显示成功，但是不能做任何的修改。于是希望在created的时候，将数据复制到子组件data的参数里，但发现this.editPost的值是空的。不知道为什么会这样。换一个方法，父组件只传给子组件要编辑的id，在子组件中获得内容并进行修改。碰到问题：由于打开modal的时候就需要获得post的内容，所以必须要点击edit的时候就触发获得post的方法。所以需要在父组件中调用子组件的方法。setEditPostId (id) { this.editPostId = id this.$refs.EditPostModal.getPostById() } 又碰到问题：每次我点的时候，获取的都是上一个id的内容，也就是说，设置editPostId并传给子组件这个过程，是比调取子组件这个方法要慢一步的，那又应该怎么办呢？似乎应该要让程序等set id并传给子组件这个过程结束了之后，再调用getPostByID这个方法。但是如何做呢？这时候想起watch函数，之前一直知道这个函数不知道什么场景用，现在终于知道了。只需要watch editPostId是否有变化，有变化的时候就触发getPostByID这个方法。原来大牛们早就帮我把这个场景的解决方法做好了，真是厉害呀！

一个最简单的Vue单页结构
type: item
date: 2021-01-14T03:56:56+00:00
description: 今天听了Vue作者Evan You的分享，Vue的一个设计理念是简单的也可以使用，复杂大型的也可以使用，所以就有了CDN引入的方式和VUE CLI的脚手架方式。把简单的单页Vue应用的结构放在这里，以后可以直接复制来使用： Document {{ name }}