2. Vue 向子组件传递参数

最新推荐文章于 2024-07-23 14:29:05 发布

白怀宇

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量404

点赞数

分类专栏： Vue2 学习笔记文章标签： vue

本文链接：https://blog.csdn.net/b342216980/article/details/106729709

版权

Vue2 学习笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

Vue 向子组件传递参数

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

<div id="app">
  <blog-info
  	v-for="info in infos"
    v-bind:info="info"
  ></blog-info>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.component('blog-info', {
  props: ['info'],
  template: `
    <div class="blog-post">
        <h3>{{ info.title }}</h3>
        <div v-html="info.content"></div>
    </div>
  `
})
new Vue({
  el: '#app',
  data: {
    infos: [
      { id: 1, title: 'My journey with Vue', content:'1..' },
      { id: 2, title: 'Blogging with Vue', content:'2..' },
      { id: 3, title: 'Why Vue is so fun', content:'3..' }
    ]
  }
})