01-组件的全局注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my_header></my_header>
<my_header></my_header>
<my_header></my_header>
<my_header></my_header>
<my_header></my_header>
</div>
<hr>
<div id="app2">
<my_header></my_header>
</div>
<script>
Vue.component("my_header", {
template: `<div><h1>{{title}}</h1></div>`,
data() {
return {
title: "这是头部"
}
},
methods: {
}
});
const app = new Vue({
el: "#app"
});
const app2 = new Vue({
el: "#app2"
})
</script>
</body>
</html>
02-组件的局部注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my_com></my_com>
<my_com></my_com>
<my_com></my_com>
<my_com></my_com>
</div>
<script>
let my_com_config = {
template: `<div><h1>这是局部组件</h1></div>`
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
03-子组件的注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: `<div><h2>这是一个子组件</h2></div>`
};
let my_com_config = {
template: `<div>
<h1>这是一个组件</h1>
<child></child>
</div>
`,
components:{
child: child_config
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
04-父子组件通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: `<div>
<h2>这是一个子组件</h2>
<p>父亲跟你们说~~{{father_say}}</p>
</div>`,
props: ["father_say"]
};
let my_com_config = {
template: `<div>
<h1>这是一个组件</h1>
<child :father_say="f_say"></child>
</div>
`,
components:{
child: child_config
},
data(){
return {
f_say: "滚~~"
}
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
05-子父通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: `<div>
<h2>这是一个子组件</h2>
<button @click="my_click">点击向父亲说话</button>
</div>`,
methods: {
my_click() {
// 向父亲说话
// 子组件提交事件
this.$emit("son_say", "父皇，儿臣有事启奏~~")
}
}
};
let my_com_config = {
template: `<div>
<h1>这是一个组件</h1>
<child @son_say="my_son_say
"></child>
<p>儿子跟我说~~{{say}}</p>
</div>
`,
components:{
child: child_config
},
data(){
return {
say: ""
}
},
methods: {
my_son_say: function (data) {
this.say = data
}
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
</html>
06-非父子通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<xiayuhao></xiayuhao>
<yuanchengming></yuanchengming>
</div>
<script>
let chenwen = new Vue();
let xiayuhao_config = {
template: `<div>
<h1>这是夏雨豪</h1>
<button @click="my_click">点击给袁打电话</button>
</div>`,
methods: {
my_click(){
// 给袁打电话 说晚上等我~~
// 向陈文提交事件
chenwen.$emit("call", "今晚等我~~~")
}
}
};
let yuanchengming = {
template: `<div>
<h1>这是袁承明</h1>
<p>夏雨豪跟我说~~{{xia_say}}</p>
</div>`,
data(){
return {
xia_say: ""
}
},
mounted(){
// 组件加载完成后执行的方法
let that = this;
chenwen.$on("call", function (data) {
console.log(data)
that.xia_say = data
})
}
};
const app = new Vue({
el: "#app",
components: {
xiayuhao: xiayuhao_config,
yuanchengming: yuanchengming
}
})
</script>
</body>
</html>
07-混合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div>
<script>
let base = {
data(){
return {
is_show: false
}
},
methods: {
show_text(){
this.is_show = true
},
hide_text(){
this.is_show = false
}
}
};
let com1 = {
template: `<div>
<button @click="show_text">点击显示文本</button>
<button @click="hide_text">点击隐藏文本</button>
<div v-show="is_show">夏雨豪</div>
</div>`,
mixins: [base],
data(){
return{
is_show: true
}
}
};
let com2 = {
template: `<div>
<button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>
<div v-show="is_show">夏雨豪</div>
</div>`,
mixins: [base]
}
const app = new Vue({
el: "#app",
components: {
com1: com1,
com2: com2
}
})
</script>
</body>
</html>
08-插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<com>
<h3 slot="title">Python21天入门</h3>
<p slot="brief">从入门到精通</p>
</com>
<com>
<h3 slot="title">Mysql</h3>
<p slot="brief">从删库到跑路</p>
</com>
</div>
<template id="my_com">
<div>
<h1>这是一个组件</h1>
<hr>
<slot name="title"></slot>
<slot name="brief"></slot>
</div>
</template>
<script>
let com = {
template: "#my_com"
};
const app = new Vue({
el: "#app",
components: {
com: com
}
})
</script>
</body>
</html>
总结：
Vue组件
组件的全局注册
-- Vue.component("组件名称", {
template: `只识别一个块级作用域`,
data(){
return{
name: xxxx
}
},
methods: {},
})
-- 任何Vue实例里用 <组件名称></组件名称>
组件的局部注册
-- let com_config = {.....}
-- const app = new Vue({
el: "#app",
components: {
组件名称： com_config
}
})
-- <div><组件名称></组件名称></div>
子组件的注册
-- 在父组件里 components: {
子组件的名称： 子组件的配置信息
}
-- 在父组件的template里展示子组件
<child></child>
父子通信
-- 先给子组件绑定属性
-- 在子组件通过props:["属性名称"]
子父通信
-- 子组件先提交事件
this.$emit("事件名称"， data)
-- 父组件 给子组件绑定事件
自己处理这个事件
非父子通信
-- 定义一个中间调度器
let Event = new Vue();
-- 其中一个组件向中间调度器提交事件
Event.$emit("事件名称", data)
-- 另一个组件要监听中间调度器里的事件
Event.$on("事件的名称", function(data){
注意this的问题
})
混合
-- 复用共用的代码块
-- mixins: [base]
插槽
-- 实现组件内容的分发
-- slot
-- 直接用slot标签
-- 命名的slot
-- 先给slot加name属性
-- 给标签元素添加slot属性= name属性值