vue 组件传递参数

对应VUE手册章节

第一种方式 也是常用的方式

<div id="app">
    <blog-post
            v-for="post in posts"
            v-bind:post="post"
            v-bind:key="post.id"
            v-bind:title="post.title"
    ></blog-post>
</div>

<script>
    Vue.component('blog-post', {
        props: ['post'], // 也可以使用title 模板中直接传递 title 
        template: '<h3>{{ post.title }}</h3>'
    })
    var vm = new Vue({
            el: '#app',
            data: {
                posts: [
                    {id: 1, title: 'My journey with Vue'},
                    {id: 2, title: 'Blogging with Vue'},
                    {id: 3, title: 'Why Vue is so fun'}
                ]
            },
        })
    ;
</script>

• 总结
  传递参数的语法就是 v-bind:属性="vm.data 中的值"，也就是
  1、将 vue 中 data 的值，通过 v-bind: 之后的属性传递给组件，
  2、组件如果需要使用，需要在组件的 props 中声明这个属性，才能在组件的模板中使用这个属性

第二种方式

<div id="app">
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
</div>

<script>
    Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
    })
    var vm = new Vue({
        el:'#app'
    });
</script>

• 总结
  这种方式 组件中的数据不是来自于 vue 的 data，而是来自于自己的组件，
  因为 v-bind:属性 的这种语法是适用于 vue.data 传递数据，此处没有传递，
  1、所有可以直接在属性上赋值，
  2、赋值后，如果模板想使用这个值，还是需要使用 props 接收这个参数的传递，这是语法规则