一、 组件化编程
组件化开发是在ES6中提出来的，可以提高页面的复用率，提高开发效率。它是一套模板化的代码，要有<template>、<script>、<style>三个标签，分别用来定义布局、脚本、样式。而且<template>下必须有一个根节点。
1.1 编写App.vue和HelloWorld.vue
HelloWorld.vue
<template>
<div> <!-- template的根节点，是必须的 -->
<h1 class="title">{{msg}}</h1>
</div>
</template>
<script>
export default { <!-- 向外暴露成员，表示向外暴露该组件 -->
data() {
return {
msg: 'Hello World'
}
}
}
</script>
<style>
.title {
color: red;
}
</style>
App.vue
<template>
<div>
<p>{{article}}</p>
<Helloworld></Helloworld> <!-- 自定义的组件Helloworld.vue -->
</div>
</template>
<script>
<!-- 引入HelloWorld.vue组件 -->
import Helloworld from './components/HelloWorld.vue'
export default {
<!-- 需要在当前组件中来定义引入的组件 -->
components: {Helloworld},
data() { //组件化编程必须使用定义data方法
return {
article: 'Vue组件间通信'
}
}
}
</script>
<style>
</style>
1.2 定义入口JS文件
import Vue from 'vue' //引入vue
import App from './App.vue' //引入自己定义的App.vue，使用变量App来接收
new Vue({
render: h => h(App), //将App组件渲染到index.html中
}).$mount("#app")
render是Vue中的一个方法，方法的定义形式如下：
// render最原始的，而传入的参数createElement又是一个函数，用来生成dom结构
render: function(createElement){
return createElement(模板);
}
// 按照ES6的箭头函数的写法，进行第一次演变
render: createElement => createElement(模板)
// 将上面的createElement变为h，那么就得到最终的形式
render: h => h(App)
$mount("#id")该方法的作用是先实例化Vue对象，接着在挂载到指定Id的节点上
二、 组件通信
2.1 props
父组件向子组件传值
父组件 App.vue
<template>
<div>
<h1>Hello World</h1>
<!-- 前面一个msg标识子组件用于接收的变量名, 引号中的msg是当前组件的值 -->
<child :msg="msg"/>
</div>
</template>
<script>
import child from './Child.vue'
export default {
components: {
child
},
data() {
return {
msg: '这个信息来源于父组件'
}
}
}
</script>
<style></style>
子组件 Child.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
// 使用props接收父组件传递过来的值
props: {
msg: String
}
}
</script>
<style></style>
2.2 事件绑定、监听、取值
2.2.1 子组件操作父组件
通过事件绑定，子组件向父组件传值
父组件 App.vue
<template>
<div>
<input type="text" v-model="value">
<hr>
<Child @dosomething="changeValue"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
components: {
Child
},
data() {
return {
value: ''
}
},
methods: {
changeValue(value) {
this.value = value;
}
}
}
</script>
<style>
</style>
子组件 Child.vue
<template>
<div>
<button @click="dosomething">子组件按钮</button>
</div>
</template>
<script>
export default {
methods: {
dosomething() {
// 调用父组件绑定的事件 dosomething，然后调用changeValue方法，并传值
this.$emit('dosomething', '张某人');
}
}
}
</script>
<style>
</style>
2.2.2 父组件监听子组件
ref用于组件间引用
父组件 App.vue
<template>
<div>
<input type="text" v-model="value">
<hr>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
components: {
Child
},
mounted() {
// 将当前组件中的changeValue方法，绑定到名为changeValue中监听事件中，
// 子组件通过 this.$emit('changeValue', '张某人') 变会调用父组件的changeValue方法
this.$refs.child.$on('changeValue', this.changeValue);
},
data() {
return {
value: ''
}
},
methods: {
changeValue(value) {
this.value = value;
}
}
}
</script>
<style>
</style>
2.2.3 父组件取子组件中的值
父组件 App.vue
<template>
<div>
<input type="text" v-model="value">
<button @click="changeValue">取子组件的值</button>
<hr>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
components: {
Child
},
data() {
return {
value: ''
}
},
methods: {
changeValue() {
this.value = this.$refs.child.value;
}
}
}
</script>
<style>
</style>
子组件 Child.vue
<template>
<div>
<p>我是子组件，我中间定义了一个value='张某人'的数据</p>
</div>
</template>
<script>
export default {
data() {
return {
value: '张某人'
}
}
}
</script>
<style>
</style>
2.3 订阅与发布
订阅与发布(Publish发布、subscribe订阅)可以应用到各种场景之下，不仅仅是父子组件之间，也可以应用于兄弟组件之间。
安装pubsub-js这个类库：
npm install pubsub-js --save
父组件 App.vue
<template>
<div>
<input type="text" v-model="value"/>
<hr>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
import PubSub from 'pubsub-js'
export default {
components: {
Child
},
data() {
return {
value: ''
}
},
mounted() {
PubSub.subscribe('channel1', (msg, value) => {
this.changeValue(value);
});
},
methods: {
changeValue(value) {
this.value = value;
}
}
}
</script>
<style>
</style>
子组件 Child.vue
<template>
<div>
<button @click="pub">子组件发布消息</button>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
methods: {
pub() {
PubSub.publish('channel1', '张某人');
}
}
}
</script>
<style>
</style>
2.4 插槽
插槽的作用说白了就是一个占位的作用。
父组件 App.vue
<template>
<List>
<!--
可以简写为这种形式
<template #title>
-->
<template v-slot:title>
<h2>插槽案例</h2>
<button class="btn btn-danger btn-sm">点击</button>
</template>
<!--
可以简写为这种形式
<template #title="props">
-->
<template v-slot:item="props">
<h3>插槽属性</h3>
<p>属性值：{{props}}</p>
</template>
</List>
</template>
<script>
import List from './components/List.vue'
export default {
components: {
List
}
}
</script>
<style>
.site-header {
text-align: center;
}
</style>
子组件 Child.vue
<template>
<div>
<slot name="title"></slot>
<slot name="item" v-bind="person"></slot> <!-- 组件属性 -->
</div>
</template>
<script>
export default {
data() {
return {
person: {age: 10, name: 'zhangsan'}
}
}
}
</script>
<style>
</style>
