Vue中用于传递参数的props组件
注：
在真实开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建.vue模板文件的方式开发,以下方法只是为了让大家理解什么是组件。
说明：
Vue.component(): 注册组件
my-component-li: 自定义组件的名字
template: 组件的模板
使用props组件传递参数
注意：默认规则下props属性里的值不能为大写
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<qinjiang v-for="item in items" v-bind:qin="item">qinjiang>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
//定义一个vue组件component
Vue.component("qinjiang",{
props:['qin'],
template:'{{qin}} '
});
var vm=new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
script>
body>
html>
页面显示：
v-for="item in items": 遍历Vue实例中定义的名为items的数组,并创建同等数量的组件
v-bind:qin="item": 将遍历的item项绑定到组件中props定义的名为qin的属性上