使用Weex / Vue进行内联数据绑定?

时间:2017-11-23 04:59:49

标签: vue.js vuejs2 weex

<template>
    <div class="demo">
        <profile-header :title="profileTitle" :imagePath="profileImagePath"></profile-header>   
    </div>
</template>

<style scoped>
    .demo {
        width: 750px;
        background-color: #f2f3f4;
    }
</style>

<script>
    import ProfileHeader from '../components/profile-header.vue'
    export default {
        components: { ProfileHeader },
        data () {
            return {
                profileTitle: "Lorem Ipsum",
                profileImagePath: "http://...."
            }
        }
    }
</script>

在Weex中,我使用title和imagePath属性创建了一个可重用的组件“profile-header”。我似乎只能使用上面提到的代码将数据传递给这两个属性,我需要在其中定义两个变量。

无论如何我可以通过在那里内联数据将数据传递给我的自定义组件吗?像:

 <profile-header :title="This is the hardcoded title" :imagePath="hard coded path"></profile-header>

1 个答案:

答案 0 :(得分:1)

<profile-header title="This is the hardcoded title" imagePath="hard coded path"></profile-header>

<profile-header :title="'This is the hardcoded title'" :imagePath="'hard coded path'"></profile-header>

在第一种情况下,您只是没有绑定,并且道具被视为字符串。在第二种情况下,您绑定了一个硬编码字符串(注意引号)。