新手!今天练习到vue组件这一块,props传值。我是使用Hbulider下写的一个HTML,实例如下:
在这里插入代码片
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
html,
body {
margin: 5px;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
//使用 v-bind 来动态传递 prop
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
</div>
</body>
<script> //blog-post是组件名
Vue.component('blog-post', {
// blog-post 组件现在接受一个"prop",类似于一个自定义特性。
// 这个 prop 名为 title
props: ['post'],
template: ‘<h3> {
{ title }} </h3> ’ , //template 是模板的意思,在 html 里面是一个可以同时控制多个子元素的父元素。在这里定