动态 Prop

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <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: 'Baidu' },
              { 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>
  </body>
</html>

image

posted @ 2022-04-28 15:05  wjxuriel  阅读(47)  评论(0)    收藏  举报