vue中組件的使用
阿新 • • 發佈：2018-07-16
v-for ext () tps data org 替代 lang set
1.組件拆分
對上一個例子中的todolist，進行組件的拆分
Vue.component( id, [definition] )
props
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件拆分</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="inputValue"> <button @click="putList">提交</button> </div> <ul> <todo-item v-for="(ls,index) in list" :key="index" :content="ls" > <!--在標簽中定義了content屬性來傳遞參數給模板組件,在組件中通過props定義[‘content‘]來接受屬性--> </todo-item> </ul> </div> <script> //1.定義全局組件 /* * Vue.component( id, [definition] ) * */ Vue.component(‘todo-item‘, { props:[‘content‘],//props 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義校驗和設置默認值。template: ‘<li>{{content}}</li>‘ }); //2.局部組件,在vue實例中聲明components來註冊指定局部組件 // var TodoItem = { // template: ‘<li>item</li>‘ // }; new Vue({ el: "#app", // components:{ // ‘todo-item‘: TodoItem // }, data: {//數據項 inputValue: "", list: [] }, methods: { putList: function () { this.list.push(this.inputValue); this.inputValue = ""; } } }); </script> </body> </html>
vue中組件的使用