Vue-组件化
Vue-组件化
- 一、定义vue组件
- 二、 全局组件定义的四种方式
-
- 1、使用vue.extend 来创建全局的vue组件
- 2、直接创建
- 3、在外部定义template 结构
- 4、使用字典的方式定义组件
- 三、定义私有的组件
- 四、组件中的data 传值
-
- 1、 父组件向子组件传值，data
- 2、父组件通过事件调用向子组件传方法
- 五、一个新的传template的方式：component
以下均为自用学习笔记
一、定义vue组件
什么是组件，组件的出现是为了拆分vue实例的代码量的，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能就可以去调用什么样的组件即可。
组件化和模块化的不同：
模块化：从代码逻辑的角度进行划分；方便代码分层开发，保证功能模块职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
二、 全局组件定义的四种方式
1、使用vue.extend 来创建全局的vue组件
// 1.1 使用vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template:'这是使用Vue.extend 创建的组件
'
// 通过template 属性指定了组件要展示的HTML结构
})
// 1.2 使用Vue.component(‘组件的名称’，创建出来的组件模板对象)
// Vue.component('mycom1',com1)
// 如果使用Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，
// 需要把大写驼峰改为小写的字母，同时两个单词直接要用 ‘-’ 链接；
// 如果不使用驼峰，则直接拿名称来使用即可；
Vue.component('mycom1',com1)
// vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引人它的，
// 第二个参数，Vue.extend 创建的组件，其中template就是组件将来要展示的内容；
Vue.component('mucom1',Vue.extend({
template:' 这是使用Vue.extend 创建的组件
'
}))
2、直接创建
<body>
<div id="app">
<com1>com1>
div>
<script>
Vue.component('com1',{
// 注意不论是哪种方式创建的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
template:' 这是一个h3的标签
'
})
var vm = new Vue({
el:'#app',
data:{},
mathods:{}
})
script>
body>
3、在外部定义template 结构
<body>
<template id="tmp1">
<div >
<h1>这是一个temp元素，在外边定义的组件结构，这个方式有代码只能提示高亮h1>
<h4>好的不错h4>
div>
template>
<div id="app">
<com3>com3>
div>
<script>
Vue.component('com3',{
template:'#tmp1'
})
var vm = new Vue({
el:'#app',
data:{},
mathods:{}
})
script>
body>
4、使用字典的方式定义组件
<script>
// 通过 对象 字面量的形式， 定义了一个 组件模板对象
var login = {
template :'1234
'
}
// 通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时为这个组件起了一个名称，
// 可以让我们 通过 标签形式。直接在页面中直接引人组件
vue.component('mylogin',login)
// 创建vue实例
var vm = new Vue({
el:'#app',
data:{},
mathods:{},
})
script>
三、定义私有的组件
<body>
<template id="tmp1">
<div >
<h1>这是一个temp元素，在外边定义的组件结构，这个方式有代码只能提示高亮h1>
<h4>好的不错h4>
div>
template>
<div id="app">
<com3>com3>
<login>login>
div>
<script>
Vue.component('com3',{
template:'#tmp1'
})
var vm = new Vue({
el:'#app',
data:{},
mathods:{},
components:{
login:{
template:'这是一个私有的 login，template元素
'
}
}
})
script>
body>
四、组件中的data 传值
// 组件可以有自己的data数据
// 组件的data和实例的data有点不一样，组件中的data可以是一个对象，但是实例中的data必须是一个方法
// 组件中的data除了必须为一个方法外，方法内部还必须返回一个对象
// 组件中的data数据和实例中的data使用方式完全一样
Vue.component('com3',{
template:'{{msg}}
',
data:function(){
return {
msg:'组件中定义的数据 '
}
}
})
1、 父组件向子组件传值，data
注意： 子组件默认无法访问到父组件的data 上的数据，和methods 中的方法
<body>
<div id="app">
<com1 v-bind:parentmsg="msg">com1>
div>
<script>
// 创建vue实例
var vm = new Vue({
el:'#app',
data:{
msg :"父组件的数据msg"
},
mathods:{},
components:{
com1:{
template :'这是子组件 -- {{ parentmsg }}
',
// props 的数据都是只读的
props:['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在props 数组中定义一下，这样才能使用
// 子组件的data 数据，并不是通过父组件传递过来的，而是子组件资深私有的，比如ajax 请求返回的数据，都可以放在data上；
// data 上的数据都是可读可写的
data(){
return {
title:'子组件title'
}
},
},
}
})
script>
body>
2、父组件通过事件调用向子组件传方法
<body>
<div id="app">
<com2 @func="show">com2>
div>
<template id="temp2">
<div>
<h1>这是子组件h1>
div>
template>
<script>
var com2 = {
template :'#temp2'
}
// 创建vue实例
var vm = new Vue({
el:'#app',
data:{
msg :"父组件的数据msg"
},
mathods:{
show(){
console.log('父组件方法')
}
},
components:{
com2
},
})
script>
body>
五、一个新的传template的方式：component
<body>
<div id="app">
<com2 @func="show">com2>
div>
<template id="temp2">
<div>
<h1>这是子组件h1>
<input type="button" value="子组件的按钮" @click="myclick">
div>
template>
<script>
var com2 = {
template :'#temp2',
methods:{
myclick(){
// 触发父组件传递过来的func方法
// emit 英文原意 为 ：触发，调用的意思
this.$emit('func')
}
}
}
// 创建vue实例
var vm = new Vue({
el:'#app',
data:{
msg :"父组件的数据msg"
},
methods:{
show(){
console.log('父组件方法')
}
},
components:{
com2
},
})
script>
body>