组件定义:
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
+组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局组件定义的三种方式:
- 使用Vue.extend配合 Vue.component方法:
var login = Vue.extend({
template: '<h1>登录</h1>'
});
Vue.component('login', login);
2.直接使用Vue.component方法:
Vue.component('register', {
template: '<h1>注册</h1>'
});
3.将模板字符串,定义到template标签中,同事,需要使用Vue.component来定义组件:
Vue.component('account', {
template: '#tmpl'
});
//注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
使用components
属性定义局部子组件:
1.组件实例定义方式:
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: { // 定义子组件
account: { // account 组件
template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
components: { // 定义子组件的子组件
login: { // login 组件
template: "<h3>这是登录组件</h3>"
}
}
}
}
});
</script>
2.引用组件:
<div id="app">
<account></account>
</div>
使用component
标签,来引用组件,并通过:is
属性来指定要加载的组件
组件中展示数据和响应事件:
1. 在组件中,data
需要被定义为一个方法,列如:
Vue.component('account', {
template: '#tmpl',
data() {
return {
msg: '大家好!'
}
},
methods:{
login(){
alert('点击了登录按钮');
}
}
});
【重点】
为什么组件中的data属性必须定义为一个方法并返回一个对象:
1. 通过计数器案例演示:
父组件向子组件传值:
1.组件实例定义方式,注意:一定要使用props
属性来定义父组件传递过来的数据
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的消息'
},
components: {
son: {
template: '<h1>这是子组件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
2.使用v-bind
或简化指令,将数据传递到子组件中:
<div id="app">
<son :finfo="msg"></son>
</div>
子组件向父组件传值:
1. 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去;
2. 父组件将方法的引用传递给子组件,其中,getMsg
是父组件中methods
中定义的方法名称,func
是子组件调用传递过来方法时候的方法名称
<son @func="getMsg"></son>
3. 子组件内部通过this.$emit('方法名', 要传递的数据)
方式,来调用父组件中的方法,同时把数据传递给父组件使用
<div id="app">
<!-- 引用父组件 -->
<son @func="getMsg"></son>
<!-- 组件模板定义 -->
<script type="x-template" id="son">
<div>
<input type="button" value="向父组件传值" @click="sendMsg" />
</div>
</script>
</div>
<script>
// 子组件的定义方式
Vue.component('son', {
template: '#son', // 组件模板Id
methods: {
sendMsg() { // 按钮的点击事件
this.$emit('func', 'OK'); // 调用父组件传递过来的方法,同时把数据传递出去
}
}
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // 子组件中,通过 this.$emit() 实际调用的方法,在此进行定义
alert(val);
}
}
});
</script>