Javascript 如何将数据从父VUEJ传递到子组件
如何将图像url传递到此vue组件?我将代码移动到一个单独的php文件中,该文件将保存Vue使用的Javascript 如何将数据从父VUEJ传递到子组件,javascript,vue.js,Javascript,Vue.js,如何将图像url传递到此vue组件?我将代码移动到一个单独的php文件中,该文件将保存Vue使用的标记,但它无法识别从父组件传递的数据 Vue.component('theme-parallax',{ template: '#parallax-tpl', data(){ return{ pageData: [] } } }); 组件标记 注意:page.embedded.parallax\u图像将在父组件中正常工作。我是新手,所以要获取我在父组件中使用的
标记,但它无法识别从父组件传递的数据
Vue.component('theme-parallax',{
template: '#parallax-tpl',
data(){
return{
pageData: []
}
}
});
组件标记
注意:page.embedded.parallax\u图像将在父组件中正常工作。我是新手,所以要获取我在父组件中使用的方法的数据,如果有人能向我解释如何将数据从主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>
{{page.title.rendered}
您需要在组件中创建一个属性,并将页面从父级传递给它
e、 g.父模板
<theme-parallax v-for="page in pageData" :page="page" :key="page.id"></theme-parallax>
好的,我也尝试了道具
,但我仍在学习vue,所以您的回答将对我有很大帮助。关于数据的一个问题,我也可以使用这种方法将数据从主实例传递到每个组件?我想尊重DRY原则,并且有一个单独的函数,可以在需要时获取主实例中的页面数据并将其传递给组件,也许这和你在回答中提到的概念是一样的?这有点“视情况而定”。如果您想在其他项目中重用组件,那么您可能应该通过props将数据传递给每个组件。另一种方法是使用vuex存储,并在每个组件内的计算属性中引用相同的vuex数据,这会保持其干燥,但会将vuex存储添加为依赖项,使它们更难重用。
Vue.component('theme-parallax',{
template: '#parallax-tpl',
props: {
page: {
type: Object,
default: function() {return null;},
}
},
data(){
return{
pageData: []
}
}
});