How to use component props or data

Easy. Instead of defining metaInfo as an object, define it as a function and access this as usual:

Post.vue:

  1. <template>
  2. <div>
  3. <h1>{{ title }}</h1>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'post',
  9. props: ['title'],
  10. data () {
  11. return {
  12. description: 'A blog post about some stuff'
  13. }
  14. },
  15. metaInfo () {
  16. return {
  17. title: this.title,
  18. meta: [
  19. { vmid: 'description', name: 'description', content: this.description }
  20. ]
  21. }
  22. }
  23. }
  24. </script>

PostContainer.vue:

  1. <template>
  2. <div>
  3. <post :title="title"></post>
  4. </div>
  5. </template>
  6. <script>
  7. import Post from './Post.vue'
  8. export default {
  9. name: 'post-container',
  10. components: { Post },
  11. data () {
  12. return {
  13. title: 'Example blog post'
  14. }
  15. }
  16. }
  17. </script>