1.Vue定义全局组件
通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。
这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题
首先看下目前的项目结构：
webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明
import Vue from 'vue'
import App from './App.vue'
// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
// 引入自定义组件。index.js是组件的默认入口
import Loading from '../components/loading'
Vue.use(Loading);
Vue.use(ElementUi);
new Vue({
el: '#app',
render: h => h(App)
})
然后在Loading.vue里面定义自己的组件模板
<!-- 这里和普通组件的书写一样 -->
<template>
<div class="loading">
loading...
</div>
</template>
在index.js文件里面添加install方法
//引入组件文件
import LoadData from '../components/LoadData'
//vue install 注册全局组件
LoadData.install = function (Vue) {
Vue.component('Loading',LoadData)
}
// 导出组件
export {LoadData}
接下啦就可以使用组件了
<template>
<Loading></Loading>
</template>
屏幕快照 2019-12-04 下午5.40.08.png
父子组件间通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异
父组件到子组件通讯
父组件到子组件的通讯主要为：子组件接受使用父组件的数据，这里的数据包括属性和方法（String, Number, Boolean, Object, Array, Function）。vue提倡单项数据流，因此在通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数
通过 props 传递数据 (推荐)
父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接受到父组件传递的数据进行验证使用
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值
prop 的定义应该尽量详细，至少需要指定其类型
<!-- 父组件 -->
<template>
<div id>
//调用组件
<my-child @childEvent="parentMethod"></my-child>
<!-- 使用自定义组件 -->
<Loading></Loading>
</div>
</template>
<script>
import MyChild from './MyChild'
export default {
components: {
MyChild
},
data() {
return {
parentMessage: "我是来自父组件的消息"
}
},
methods:{
parentMethod({ name, age }) {
console.log(this.parentMessage, name, age)
}
}
}
</script>
通过 $on 传递父组件方法
通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系
<!-- 子组件 -->
<template>
<div>
<span>{{ parentMessage }}</span>
</div>
</template>
<script>
export default {
/*
* 父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接受到父组件传递的数据进行验证使用
* */
props: {//prop 的定义应该尽量详细，至少需要指定其类型
parentMessage: {
type: String,
default: '默认显示的信息'
// require: true // 必填
}
},
mounted() {
//1、$emit(eventName) 触发事件 准确来说这种方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件，而是子组件通过与父组件的关联关系，获取了父组件的数据。
this.$emit('childEvent', { name: 'zhangsan', age: 10 })
}
}
</script>
文章参考 Vue 自定义组件
网友评论