javascript - 如何将数据从父 vuejs 传递给子组件
问题描述
如何将图像 url 传递给这个 vue 组件?我将代码移动到一个单独的 php 文件中,该文件将保存<script>
Vue 使用的标签,但它不会识别来自父组件的传递数据。
Vue.component('theme-parallax',{
template: '#parallax-tpl',
data(){
return{
pageData: []
}
}
});
组件标记注意: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,您应该为键使用唯一属性。
然后在组件中
Vue.component('theme-parallax',{
template: '#parallax-tpl',
props: {
page: {
type: Object,
default: function() {return null;},
}
},
data(){
return{
pageData: []
}
}
});
推荐阅读
- module - 在 vTiger CRM 中使用自定义表创建自定义模块
- angular - 如何在 Angular 组件上动态创建 @Output?
- html - 动画编写html、css
- prometheus - 根据 PromQL 中的其他常见值从另一个度量中获取标签值
- python - 更换 Spark 的 CASE WHEN THEN
- react-native - 多个版本的 npm 包并在屏幕中导入
- c++ - 代码合法意味着什么?
- java - 根据多个字段过滤对象的 ArrayList
- kotlin - Kotlin 接口方法抽象
- php - Laravel 中的 first() 返回表中的第一行