细读Prop传递数据

细读Prop传递数据

在定义组件的时候我们通常将所用传递的内容(也就是prop attribute)使用props选项将其包含在该组件可接受的prop列表中，例如

Vue.component('blog-post',{
	prop:['title'],
	template:'<h2>{{ title }}</h3>'
})

这里的title就是我们传递进来的值，再加上以下代码

<div id="blog=post-demo">
    <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>

new Vue({
    el:'#blog-post-demo',
})

便可以完成渲染。但是我们发现这样传递数据太繁琐，每次都要blog-post标签来完成。因此就出现了用一个数组来进行动态传递

new Vue({
    el:'#blog-post-demo',
    data:{
        posts:[
            {id: 1,title:'My journey with Vue'},
            {id: 2,title:'Blogging with Vue'},
            {id: 3,title:'Why Vue is so fun'}
        ]
    }
})

上面的代码其实很简单就是在Vue模块中加一个posts数组,下面就要将这些数据传用组件进行渲染，想要渲染肯定会先接受数据。我第一次写出来代码：

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

Vue.component('blog-post',{
    props:['post'],
    template:'<h3>{{ title }}'
})

这是报错了Property or method "title" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See大概的意思就是title没有定义，仔细检查发现原来是props接受的原来是post,正确的应该接受我们v-bind动态绑定的title也就是：

Vue.components('blog-post',{
	props:['title'],
	template:'<h3>{{title}}</h3>'
})

当时脑子里又浮现了如果我想将数组的id显示出来该怎么办，于是就有了以下代码：

Vue.component('blog-post',{
    props:['title','key'],
    template:'<h3>{{ key }} {{title}}'
})

这时又报错了"key" is a reserved attribute and cannot be used as component prop.意思就是key是一个保留属性，不能用作组件道具

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

Vue.component('blog-post',{
	props:['title','key1'],
    template:'<h3>{{ key }} {{ title }}</h3>'
})

所以当我v-bind绑定key1时就没有问题了，但是如果所传递的数据不仅仅是标题和id时就会在动态绑定时绑定的数据就多的无法直视

<blog-post
     v-for="post in posts"
     v-bind:key="post.id"
     v-bind:title="post.title"
     v-bind:content="post.content"
     v-bind:publishedAt="post.publishedAt"
     v-bind:comments="post.comments"
 ></blog-post>

这样看的很麻烦并且组件写的话props也需要接受很多属性因此就有了重构blog-post组件的方法，让它单独接受一个单独的post prop:

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

Vue.component('blog-post',{
    props:['post'],
    template:
    <div class="blog-post">
    	<h3> {{ post.title }} </h3>
         <div v-html="post.content"></div>
     </div>
})

这里接受的是post因此在vue中的data中写的所有属性都可以用post.属性名来进行渲染；这里还有个问题就是在组件模板中只有一个根元素,因此像template中

<h3>{{ title }}</h3>
<div v-html="contene"></div>

这样写是会报错的并解释道every component must have a single root element(每个组件必须只有一个根元素)所以将模板中的内容包裹在一个父元素内来修复这个问题：

<div class="blog-post">
    <h3>{{ title }}</h3>
    <div v-html="content"></div>
</div>