阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 父组件向子组件传递数据通过 props

      我的使用场景:

      • 父组件:home.vue
      • 子组件:feed-section.vue

      父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue;因为在子组件中需要渲染 HTML;(当然如果简单些你可以使用 vue 插槽;)

      为了让组件完全的可复用;尽量不在父组件干涉子组件内容

      实现方法:

      父组件中的操作:把数据放在子组件的 :xxxxx 上,这样就传过去了

      <feed-section :recommend_feeds="recommend_feeds"></feed-section>
      

      子附件的操作:

      props: [
        'recommend_feeds'
      ],
      

      通过 props 中写一个recommend_feeds 这样就可以拿到父组件通过recommend_feeds穿过来的数据了;

      具体写法如下图

      home.vue 的

      <template>
        <div class="card">
          <quick-nav></quick-nav>
          <feed-section :recommend_feeds="recommend_feeds"></feed-section>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          首页组件2
        </div>
      </template>
      
      <script>
        import QuickNav from '@/base/quick-nav/quick-nav.vue'
        import FeedSection from '@/base/feed-section/feed-section.vue'
        import {getHomeData} from '@/api/home-data.js'
      
        export default {
          data () {
            return {
              recommend_feeds: []
            }
          },
          components: {
            QuickNav,
            FeedSection
          },
          created () {
            this.starGetHomeData()
          },
          methods: {
            starGetHomeData () {
              getHomeData().then((res) => {
                console.log(res.recommend_feeds)
                this.recommend_feeds = res.recommend_feeds
              })
            }
          }
        }
      </script>
      

      feed-section.vue 中的代码

      <script>
        export default {
          name: 'feed-section',
          props: [
            'recommend_feeds'
          ],
          data () {
            return {
              myData: []
            }
          },
          mounted: function () {
          },
          methods: {
            catchErr (e) {
      //        const sourcesImg = e.target.getAttribute('src')
      //        e.target.setAttribute('src', sourcesImg)
              console.log(e)
            }
          }
        }
      </script>
      
      目录
      目录