Home>

Even if I register the component and specify v-bind in the template, it does not display well.
I think this is a rudimentary part, but please teach me.


<component-txt title = "Title 1" content = "Content 1"></component-txt>
Vue.component ('component-txt', {
  template: `
   
  <p>{{title}}</p>
  <p>{{content}}</p>
      link 
   
  `,
  props: ['title','content']
})

new Vue ({{
  el:'#app',
  data () {
    return {
      url: "https://google.com"
    }
  }
})

The actual display screen will be in the following state.

Title 1
Content 1
Link (the link here doesn't follow)

Thing I want to do:
I want to make the URL part a different link destination with props etc. while reusing it in the component.

  • Answer # 1

    In principle, you can only see what is in the component within the component.
    Because there is no url in the component. Should I specify it as props and pass it?

    
    <component-txt v-bind: url = "url" title = "Title 1" content = "Content 1"></component-txt>
    
    Vue.component ('component-txt', {
      template: `
       
      <p>{{title}}</p>
      <p>{{content}}</p>
          link 
       
      `,
      props: ['title','content','url']
    })
    new Vue ({{
      el:'#app',
      data () {
        return {
          url: "https://google.com"
        }
      }
    })