Vue v-bind

README.md

Vue V-Bind Directive

• v-bind is used to:
  • Bind values to Attributes
  • Pass values to child components

Bind values to attributes (href, class, src...)

- You can use the full syntax like:
```
<a v-bind:href="link">{{ link-text }}</a>
```
- Or you can use the shorthand syntax
```
<a :href="link.url">{{ link.text }}</a>
```
- The data object in this case might look like
```
data() {
  return {
    link: {
      url: 'https://link.com',
      text: 'link name'
    }
  }
}
```

Pass props to child components

- In the child component, set an array called `props`,
- In the parent component, pass values to the child componet using v-bind
  - Parent Component
    - template
      ```
      <Card :info="info" />
      ```
    - script
      ```
      data() {
        return {
          info: {
            img: '/assets/stuff.img',
            text: 'scooby doo text'
          }
        }
      }
      ```
  - Child Component
    - template
      ```
      <figure>
        <nuxt-img :src="info.img">
        <figcaption>{{ info.text }}</figcaption>
      </figure>
      <div>
      ```
    - script
      ```
      export default {
        props: ['info']
      }
      ```

• Note that v-bind is only used in one direction