Vue.js 父组件向子组件传递数据通过 props
   1 分钟阅读

我的使用场景:

  • 父组件: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 的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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 中的代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>