2017-11-23 5 views
0
<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では、タイトルとimagePathプロパティを持つ再利用可能なコンポーネント "profile-header"を作成しました。上記のコードを使用して、2つの変数にデータを渡すことができます。ここでは、2つの変数を定義する必要があります。Weex/Vueを使用したインラインデータバインディング?

ここにデータをインライン展開してカスタムコンポーネントにデータを渡すことはできますか?同様に:

最初のケースで
<profile-header :title="This is the hardcoded title" :imagePath="hard coded path"></profile-header> 

答えて

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> 

、あなたは単純に結合されていないと小道具は文字列として扱われます。後者の場合は、ハードコーディングされた文字列をバインドしています(引用符に注意してください)。

関連する問題