vue使用：组件
目录：
全局组件注册
- 使用Vue.component注册，第一个参数为组件的标签名，第二个参数为数据字典
- 数据字典包含渲染模板template和渲染数据data
- data必须是一个单体函数
- 并且数据字典里没有el标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<global-component></global-component>
</div>
<script>
Vue.component("global-component" ,{
template: `
<div>
<h3>{{ why }}</h3>
<h2>{{ why }}</h2>
</div>
`,
data() {
return {
why: "wanghongyu"
}
}
});
new Vue({
el: "#app"
})
</script>
</body>
</html>
也可以将<global-component></global-component>写入Vue的template中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
Vue.component("global-component" ,{
template: `
<div>
<h3>{{ why }}</h3>
<h2>{{ why }}</h2>
</div>
`,
data() {
return {
why: "wanghongyu"
}
}
});
new Vue({
el: "#app",
template: `<global-component></global-component>`
})
</script>
</body>
</html>
组件也可以有computed，watch，methods等，这些全局组件都可以进行复用
局部组件注册
局部组件就是简单的通过创建一个字典来实现注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<h3>{{ why }}</h3>
<h2>{{ why }}</h2>
</div>
`,
data(){
return {
why: "wanghongyu"
}
},
computed: {}
}
new Vue({
el: "#app",
template: `<app-header></app-header>`,
components: {
"app-header": Header
}
})
</script>
</body>
</html>
父组件与子组件通信
- 父组件通过v-bind将数据绑定到子组件上
- 子组件使用props接收数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<h3>{{ why }}</h3>
<h2>{{ fd }}</h2>
</div>
`,
props: ["fd"],
data(){
return {
why: "wanghongyu"
}
},
computed: {}
}
new Vue({
el: "#app",
template: `<app-header v-bind:fd="Fdata"></app-header>`,
components: {
"app-header": Header
},
data() {
return {
"Fdata": 1
}
}
})
</script>
</body>
</html>
子组件与父组件通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<button @click="bebig">变大字体</button>
</div>
`,
props: ["fd"],
methods: {
bebig: function() {
this.$emit("change-size", 0.1)
}
}
}
new Vue({
el: "#app",
template: `
<div>
<app-header v-on:change-size="big"></app-header>
<span :style="{ fontSize: postFontSize + 'em'}">wanghongyu</span>
</div>
`,
components: {
"app-header": Header
},
data() {
return {
postFontSize: 1
}
},
methods:{
big: function(value) {
this.postFontSize += value
}
}
})
</script>
</body>
</html>
混入
混入就是重复的方法通过引入的方式进行使用，使用的mixins
正常我们写重复方法是以下方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let aaa = {
template: `
<div>
<button @click="show('aaa')">aaa显示</button>
<button @click="hide('aaa')">aaa消失</button>
</div>
`,
methods: {
show: function(name) {
console.log(name+" show")
},
hide: function(name) {
console.log(name+" hide")
}
}
}
let bbb = {
template: `
<div>
<button @mouseenter="show('bbb')">bbb显示</button>
<button @mouseenter="hide('bbb')">bbb消失</button>
</div>
`,
methods: {
show: function(name) {
console.log(name+" show")
},
hide: function(name) {
console.log(name+" hide")
}
}
}
new Vue({
el: "#app",
template: `
<div>
<aaa></aaa>
<bbb></bbb>
</div>
`,
components: {
"aaa": aaa,
"bbb": bbb
}
})
</script>
</body>
</html>
可是通过mixins进行混入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let mixs = {
methods: {
show: function(name) {
console.log(name+" show")
},
hide: function(name) {
console.log(name+" hide")
}
}
}
let aaa = {
template: `
<div>
<button @click="show('aaa')">aaa显示</button>
<button @click="hide('aaa')">aaa消失</button>
</div>
`,
mixins: [mixs],
}
let bbb = {
template: `
<div>
<button @mouseenter="show('bbb')">bbb显示</button>
<button @mouseenter="hide('bbb')">bbb消失</button>
</div>
`,
mixins: [mixs],
}
new Vue({
el: "#app",
template: `
<div>
<aaa></aaa>
<bbb></bbb>
</div>
`,
components: {
"aaa": aaa,
"bbb": bbb
}
})
</script>
</body>
</html>
插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<global-component>首页</global-component>
<global-component>博客</global-component>
<global-component>分类</global-component>
</div>
<script>
Vue.component("global-component", {
template: `
<div class="box"><slot></slot></div>
`
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
插槽可以拥有姓名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<global-component>
<div slot="aaa">这是aaa</div>
<div slot="bbb">这是bbb</div>
</global-component>
</div>
<script>
Vue.component("global-component", {
template:
`
<div>
<slot name="bbb"></slot>
<slot name="aaa"></slot>
</div>
`
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
