(一)、组件介绍:
组件开发的好处:
1.提升开发效率
2.方便重复使用
3.简化调试步骤
4.提升整个项目的可维护性
5.便于协同开发
(二)、组件的注册
(1)、全局注册
// 全局注册子组件
Vue.component('TodoItem',{
// ...options...
})
// 组件名TodoItem 有两种命名方式 1、驼峰式命名 PascalCase
// 2、短横线式命名 kebab-case(短横线分隔命名)
无论是驼峰式命名组件还是短横线命名组件,在使用的时候用短横线
<todo-item></todo-item>
v-bind动态传值
<body>
<div id="root">
<input v-model="inputValue" type="text" />
<button @click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('TodoItem',{
props: ['content'],
template: '<li>{{content}}</li>'
})
var vm = new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleBtnClick: function(){
this.list.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
</body>
(2)、局部注册子组件
<body>
<div id="root">
<input v-model="inputValue" type="text" />
<button @click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script type="text/javascript">
var TodoItem = {
props: ['content'],
template: '<li>{{content}}</li>'
}
var vm = new Vue({
el: '#root',
components: {
'todo-item': TodoItem
},
data: {
inputValue: '',
list: []
},
methods: {
handleBtnClick: function(){
this.list.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
</body>
(3)、$emit()
$emit()向外触发自定义事件
$emit()方法的第二个参数就能向父组件上的回调函数进行传值
<body>
<div class="wrapper">
<input v-model="inputCont" type="text" />
<button @click="addItem">添加项目</button>
<ol type="A">
<list-item v-bind:content="item"
v-bind:index = "index"
v-for="(item, index) in list"
@delete="handleItemDelete">
</list-item>
</ol>
</div>
<script type="text/javascript">
Vue.component('listItem', {
props: ['content', 'index'],
template: '<li @click="handleItemClick">{{content}} -- {{index}}</li>',
methods: {
handleItemClick: function(){
this.$emit("delete", this.index);
}
}
})
var vm = new Vue({
el: '.wrapper',
data: {
inputCont: '',
list: []
},
methods: {
addItem: function(){
var cont = this.inputCont;
if(cont === ''){
alert('需要输入内容')
}else{
this.list.push(cont);
this.inputCont = '';
}
},
handleItemDelete: function(index){
this.list.splice(index, 1);
}
}
})
</script>
</body>