动态 Prop

 

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

 

Prop 实例

<div id="app">

  <site-info

    v-for="site in sites"

    :id="site.id"

    :title="site.title"

  ></site-info>

</div>

 

<script>

const Site = {

  data() {

    return {

      sites: [

        { id: 1, title: 'Google' },

        { id: 2, title: 'Runoob' },

        { id: 3, title: 'Taobao' }

      ]

    }

  }

}

 

const app = Vue.createApp(Site)

 

app.component('site-info', {

  props: ['id','title'],

  template: `<h4>{{ id }} - {{ title }}</h4>`

})

 

app.mount('#app')

</script>