如何将数据从父组件传递到子组件vuejs。

我怎样才能把图片的网址传给这个vue组件?我把代码移到了一个单独的php文件中,这个文件将包含以下内容 <script> 标签,但它不会识别来自父组件的传递数据。

Vue.component('theme-parallax',{
  template: '#parallax-tpl',
  data(){
    return{
      pageData: []
    }
  }
});

组件标记 NB: page.embedded.parallax_image 会在父组件中正确工作。我是新来的,所以为了获得数据,我在父组件中使用了一个方法,如果有人能给我解释一下如何将数据从主vue实例传递到所有组件,那就太好了。

<script type="text/x-template" id="parallax-tpl">
    <div class="row m-0">
        <div class="col-sm-12 col-md-12 col-lg-12 col-parallax p-0" v-prlx.background="{ speed: 0.08 }" :style="{ height: '70vh', backgroundImage: 'url('+page.embedded.parallax_image+')', backgroundSize: 'cover' }"></div>
    </div>
</script>

我是这样使用组件的

<script type="text/x-template" id="home-tpl">
  <div class="container-fluid p-0">

    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 p-0" v-if="page.embedded.primary_featured_image">
        <img class="img-fluid w-100" :src="page.embedded.primary_featured_image">
      </div>
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5">
        <h1>{{ page.title.rendered }}</h1>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5" v-html="page.content.rendered"></div>   
    </div>

    <theme-section data-section="about" data-section-align="left"></theme-section>

    <theme-parallax v-for="page in pageData" ></theme-parallax>

    <theme-section data-section="office" data-section-align="right"></theme-section>

  </div> <!-- end container-fluid -->
</script>

解决方案:

你需要在你的组件中创建一个属性,然后将页面从父模板传递给它。

例如:父模板

<theme-parallax v-for="page in pageData" :page="page" :key="page.id"></theme-parallax>

如果页面没有唯一的id,你应该使用唯一的属性作为key。

然后在组件中

Vue.component('theme-parallax',{
  template: '#parallax-tpl',
  props: {
    page: {
      type: Object,
      default: function() {return null;},
    }
  },
  data(){
    return{
      pageData: []
    }
  }
});

给TA打赏
共{{data.count}}人
人已打赏
解决方案

Android Studio更新到3.6.x后无法安装APK。

2022-5-12 13:00:33

解决方案

有没有一个R包来进行主题一致性和评估主题模型?

2022-5-12 14:00:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索