Vue组件化开发
Vue 组件化开发
- 1、组件化的基本使用过程
- 2 、全局组件和局部组件
-
- 2.1、全局组件
- 2.2、局部组件
- 3、父组件和子组件的区别
- 4、注册组件的语法糖写法
- 5、组件模版的分离写法
- 6、组件使用data函数
- 7、父子组件的通信
-
- 7.1、props基本用法
- 7.2、props驼峰标示
- 7.3、子传父
- 7.4、父访问子-childen-refs
- 7.5、子访问父-parent-root
- 8、插槽slot
-
- 8.1、插槽的基本使用
- 8.2、具名插槽
1、组件化的基本使用过程
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<my-cpn>my-cpn>
<my-cpn>my-cpn>
div>
<script src="../js/vue.js">script>
<script>
// 1. 常见组件构造器对象
const cpnC = Vue.extend({
template:`
我是标题
我是内容
`
})
// 2. 注册组件
Vue.component('my-cpn',cpnC);
const app = new Vue({
el:'#app',
data:{
message:'你好哇'
}
})
script>
body>
html>
2 、全局组件和局部组件
2.1、全局组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<my-cpn>my-cpn>
<my-cpn>my-cpn>
div>
<div id="app2">
<my-cpn>my-cpn>
div>
<script src="../js/vue.js">script>
<script>
// 1. 常见组件构造器对象
const cpnC = Vue.extend({
template:`
我是标题
我是内容
`
})
// 2. 注册组件(全局组件,意味着可以在多个Vue的实例下面使用)
Vue.component('my-cpn',cpnC);
const app = new Vue({
el:'#app',
data:{
message:'你好哇'
}
})
const app2 = new Vue({
el:'#app2',
data:{
message:'你好哇'
}
})
script>
body>
html>
- 运行结果
2.2、局部组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn>cpn>
div>
<div id="app2">
<my-cpn>my-cpn>
div>
<script src="../js/vue.js">script>
<script>
// 1. 常见组件构造器对象
const cpnC = Vue.extend({
template:`
我是标题
我是内容
`
})
// 2. 注册组件(全局组件,意味着可以在多个Vue的实例下面使用)
// Vue.component('cpn',cpnC);
const app = new Vue({
el:'#app',
data:{
message:'你好哇'
},
components:{
// cpn：使用组件时的标签名
cpn: cpnC
}
})
const app2 = new Vue({
el:'#app2',
data:{
message:'你好哇'
}
})
script>
body>
html>
- 运行结果
3、父组件和子组件的区别
- 栗子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn2>cpn2>
div>
<script src="../js/vue.js">script>
<script>
// 1. 创建第一个组件(子组件)
const cpnC1 = Vue.extend({
template:`
我是标题1
我是内容1
`
})
// 2. 创建第二个组件(父组件)
const cpnC2 = Vue.extend({
template:`
我是标题2
我是内容2
- 运行结果
4、注册组件的语法糖写法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn1>cpn1>
<cpn2>cpn2>
div>
<script src="../js/vue.js">script>
<script>
// 1. 创建组件构造器
// const cpn1 = Vue.extend({
// template: `
//
// 我是标题
//
// `
// })
// 2. 注册全局组件(语法糖写法)
Vue.component('cpn1',{
template: `
我是标题
`
});
const app = new Vue({
el:'#app',
data:{
message:'你好哇'
},
components:{
'cpn2':{
template: `
我是标题
`
}
}
})
script>
body>
html>
5、组件模版的分离写法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn>cpn>
div>
<template id="cpn">
<div>
<h2>我是标题h2>
<p>我是内容p>
div>
template>
<script src="../js/vue.js">script>
<script>
Vue.component('cpn',{
template: cpn
});
const app = new Vue({
el:'#app',
data:{
message:'你好哇'
}
})
script>
body>
html>
6、组件使用data函数
- 栗子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn>cpn>
div>
<template id="cpn">
<div>
<h2>当前计数:{
{counter}}h2>
<button @click="increment">+button>
<button @click="decrement">-button>
div>
template>
<script src="../js/vue.js">script>
<script>
Vue.component('cpn',{
template: '#cpn',
data(){
return {
counter:0
}
},
methods:{
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
});
const app = new Vue({
el:'#app',
data:{
message:'你好哇'
}
})
script>
body>
html>
- 运行结果：
7、父子组件的通信
7.1、props基本用法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn v-bind:cmovies="movies" :cmessage="message">cpn>
div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cmovies">{
{item}}li>
ul>
<h2>{
{cmessage}}h2>
div>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn',
props:['cmovies','cmessage'],
data(){
return{
}
},
methods:{
}
}
const app = new Vue({
el:'#app',
data:{
message:'你好哇',
movies:['海王','海贼王','海尔兄弟']
},
components:{
cpn
}
})
script>
body>
html>
- 运行结果：
7.2、props驼峰标示
- 栗子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn :c-info="info">cpn>
div>
<template id="cpn">
<h2>{
{cInfo}}h2>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn',
props:{
cInfo:{
type:Object,
default(){
return {
}
}
}
}
}
const app = new Vue({
el:'#app',
data:{
info:{
name:'kobe',
age:18,
height:1.88
}
},
components:{
cpn
}
})
script>
body>
html>
- 运行结果：
7.3、子传父
- 使用自定义事件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn @item-click="cpnClick">cpn>
div>
<template id="cpn">
<div>
<button v-for="item in categories"
@click="btnClick(item)">
{
{item.name}}
button>
div>
template>
<script src="../js/vue.js">script>
<script>
// 1. 子组件
const cpn = {
template:'#cpn',
data(){
return{
categories:[
{
id:'aaa',name:'热门推荐'},
{
id:'bbb',name:'手机数码'},
{
id:'ccc',name:'家用家电'},
{
id:'ddd',name:'电脑办公'}
]
}
},
methods:{
btnClick(item){
// 发射事件
this.$emit('item-click',item)
}
}
}
// 2. 父组件
const app = new Vue({
el:'#app',
components:{
cpn
},
methods:{
cpnClick(item){
console.log(item)
}
}
})
script>
body>
html>
- 运行结果
7.4、父访问子-childen-refs
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn>cpn>
<cpn ref="aaa">cpn>
<button @click="btnClick">按钮button>
div>
<template id="cpn">
<div>我是子组件div>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn',
methods:{
showMessage(){
console.log('showMessage')
}
},
data() {
return {
name:'我是子组件的name'
}
},
}
const app = new Vue({
el:'#app',
components:{
cpn
},
methods: {
btnClick(){
// 1. $children
// console.log(this.$children)
// this.$children[0].showMessage()
// for(let c of this.$children){
// console.log(c.name)
// c.showMessage()
// }
// 2.refs
console.log(this.$refs.aaa.name)
}
}
})
script>
body>
html>
7.5、子访问父-parent-root
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn>cpn>
div>
<template id="cpn">
<div>
<h2>我是子组件h2>
<button @click="btnClick">按钮button>
div>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn',
methods:{
btnClick(){
console.log(this.$parent)
}
}
}
const app = new Vue({
el:'#app',
components:{
cpn
}
})
script>
body>
html>
8、插槽slot
8.1、插槽的基本使用
- 栗子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn><button>案例button>cpn>
<cpn>cpn>
<cpn><button>按钮button>cpn>
div>
<template id="cpn">
<div>
<h2>我是子组件h2>
<p>我是组件，哈哈哈p>
<slot><button>案例button>slot>
div>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn'
}
const app = new Vue({
el:'#app',
components:{
cpn
}
})
script>
body>
html>
- 运行结果：
8.2、具名插槽
- 栗子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn><span slot="center">标题span>cpn>
<cpn><button slot="left">返回button>cpn>
div>
<template id="cpn">
<div>
<slot name="left"><span>左边span>slot>
<slot name="center"><span>中间span>slot>
<slot name="right"><span>右边span>slot>
div>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template:'#cpn'
}
const app = new Vue({
el:'#app',
components:{
cpn
}
})
script>
body>
html>
- 运行结果：
