Vue.js组件传参案例

< html lang=" en">

< head>

< meta charset=" UTF-8">

< meta name=" viewport" content=" width=device-width, initial-scale=1.0">

< meta http-equiv=" X-UA-Compatible" content=" ie=edge">

< title>Document</ title>

< script type=" text/javascript" src=" js/vue.min.js"></ script>

</ head>

< body>

< div id=" app">

< ul>

< li>

< hello v-for=" (item,index) in arr" v-bind:content=" item" v-bind:txtindex=" index"></ hello>

</ li>

</ ul>

</ div>

</ body>

< script>

// vue 组件传参数

Vue. component(' hello', {

template:' <li>{{txtindex}}{{content}}<a href="">我是A</a></li>' ,

props: [' content',' txtindex'],

})

var app = new Vue({

el: ' #app',

data: {

arr:[" 打游戏"," 学习vue"," 买菜"]

},

})

</ script>

</ html>