Vue组件
一、组件介绍
- 每一个组件都是一个vue实例
- 每个组件均具有自身的模板template，根组件的模板就是挂载点，根组件也可以显式书写模板，会替换掉挂载点
- 每个组件模板只能拥有一个根标签
- 子组件的数据具有作用域，以达到组件的复用
二、根组件
1、什么是根组件
通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
2、模板template
- 由""包裹的html代码块，出现在组件的内部，赋值给组件的 $template 变量
- 根组件如果不书写自身模板，那么模板就采用挂载点,如果显式书写模块，就会替换挂载点,但根组件必须拥有挂载点
<body>
<p>app之上</p>
<div id="app">
<h1>{{ msg }}</h1>
</div>
<p>app之下</p>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 每个组件组件均拥有模板,template
var app = new Vue({
// 根组件的模板就是挂载点
el: "#app",
data : {
msg: "根组件"
},
template: "<div>显式模板</div>"
})
// app.$template 取值
</script>三、局部组件
- 一个满足vue语法规则的对象就是一个组件
- 直接定义组件，用一个变量名来接收，就是创建一个局部组件
- 变量名就是局部组件的组件名， var 组件名 = {}
- 通过组件名可以使用该组件
使用局部组件时，要先在根组件中注册
<div id="app">
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<!-- 语法规则 -->
<!-- 有自身的模板template，有data/methods/computed/watch -->
<script>
var localTag = {
// data需要绑定方法，数据通过返回值进行处理，达到组件复用，数据的私有化
data () {
return {
count: 0
}
},
template: '<button @click="btnAction">局部{{ count }}</button>',
methods: {
btnAction () {
this.count ++
}
}
}
new Vue({
el: "#app",
// 注册子组件，局部组件要在父组件中使用，必须要提前在父组件中注册
components: {
'local-tag': localTag // 当key与value写法一样时，可以直接写 localTag
}
})
</script>四、全局组件
- 用 Vue.component("组件名", {}) 来创建全局组件
- 全局组件附属于Vue实例，可以不需要注册就可以使用
使用全局组件，不用在父级组件中注册
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag', {
data () {
return {
count: 0
}
},
template: '<button @click="btnAction">全局{{ count }}</button>',
methods: {
btnAction () {
this.count ++
}
}
})
new Vue({
el: "#app"
})
</script>五、父组件传递数据给子组件
- 通过 绑定属性 的方式进行数据传递
- 给在父组件中出现的子组件名定义标签的全局属性
- 在全局属性的值赋给父组件的数据变量
- 在子组件内部，通过props拿到标签中的全局属性名获取对应的值
<div id="app">
<global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
// 子组件中通过props拿到标签中的全局属性名
props:['sup_data1', 'supdata2'],
// 通过属性名取得父组件中的数据
template: '<div @click="divClick">{{ sup_data1 }} {{ supdata2 }}</div>',
methods:{
divClick(){
console.log(this.sup_data1)
}
}
})
new Vue({
el: '#app',
data: {
sup_data1: '数据1',
sup_data2: '数据2'
}
})
</script>六、子组件传递数据给父组件
- 通过 发送事件请求 的方式进行数据传递
- 数据由子组件提供, 父组件通过事件的回调方法获取数据
- 发生数据的关键: $emit("事件名", ...args)
<div id="app">
<global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
data () {
return {
sub_data1: "数据1",
sub_data2: '数据2'
}
},
template: '<div @click="clickAction">发生</div>',
methods: {
clickAction () {
this.$emit('send_action', this.sub_data1, this.sub_data2)
}
}
})
new Vue({
el: '#app',
methods: {
receiveAction (v1, v2) {
console.log(v1, v2)
}
}
})
</script>七、父子组件实现todoList
<div id="app">
<div>
<input type="text" v-model='value'>
<button @click='click'>提交</button>
</div>
<ul>
<item
v-for='(e, i) in list'
:key='i'
:ele='e'
:index='i'
@delete='deleteAction'
></item>
</ul>
</div>
<script type="text/javascript">
Vue.component('item', {
props: ['ele', 'index'],
template: '<li @click="item_click">{{ ele }}</li>',
methods: {
item_click: function () {
this.$emit('delete', this.index)
}
}
})
new Vue({
el: '#app',
data: {
value: '',
list: [],
},
methods: {
click: function () {
this.list.push(this.value)
this.value = ''
},
deleteAction: function (index) {
this.list.splice(index, 1)
}
}
})
</script>