vue中的组件

Posted 2020-09-27 小_Li_Kelly

组件是Vue最强大的功能之一。
组件是一组可被复用的具有一定功能，独立的完整的代码片段，这个代码片段可以渲染一个完整视图结构
组件开发
如何注册组件？
第一步，在页面html标签中使用这个组件名称，像使用DOM元素一样。(通常是一个自定义元素)。
<div id="app">
　　<my-component></my-component>
</div>
第二步，使用Vue.extend方法创建一个组件
var MyComponent = Vue.extend({
　　// .........
})
在extend方法中接收一个对象.
这个对象是一个描述组件的对象，它具有Vue实例化对象上的属性方法，它还有一些特殊的属性
template：组件内部渲染模的板字符串
props：父组件向组件内部传入数据的引用
<div id="app">
　　<input type="text" v-model="inputVal"/>
　　<my-component msg="you" v-bind:inputtext="inputVal"></my-component>
</div>
想在template里用这个msg和inputVal
组件内部还没有这个msg和inputVal
v-bind是为了创造个js环境
所以将组件中的属性值引入组件内部通过props属性
var MyComponent = Vue.extend({
props:[‘msg‘,‘inputtext‘],
//定义模板字符串
template: ‘<div>hello world!{{msg}}</div>‘
})
第三步，使用Vue.component方法注册组件。
Vue.component(‘my-component‘, MyComponent)
eg:
//页面中使用组件
<div id="app">
　　<my-component></my-component>
</div>
// 定义组件
var MyComponent = Vue.extend({
　　//定义模板字符串
　　template: ‘<div>hello world!</div>‘
})
// 注册组件
Vue.component(‘my-component‘, MyComponent)
//创建vue的实例化对象
new Vue({
　　el: ‘#app‘
})
结果：
<div id="example">
　　<div>hello world!</div>
</div
在vue的组件中他是一个独立个体，因此他的事件，数据等等要绑定在组件的内部不是vue的实例化对象
注意：
子组件向父组件通信，通过子组件实例化对象上的$dispatch方法实现
第一个参数表示消息的名称
从第二个参数开始表示子组件向父组件传递的数据
eg:
var MyComponent = Vue.extend({
　　template: ‘<div>hello world!</div><button v-on:click="toUpper"></button>‘,
　　methods:{
　　toUpper:function(){
　　　　//具体的逻辑
　　　　//作用域 this指的是组件的实例化对象
　　　　this.$dispatch("abc",123)
　　}
　　}
})
为了接收子组件向父组件传送的消息。在父组件中订阅该消息 在events属性中定义这些消息
属性表示消息的名称
属性值是一个函数，表示处理消息的回调函数，参数是子组件发送消息时候传递参数，作用域 vue的实例化对象
new Vue({
　　el: ‘#app‘,
　　event:{
　　　　//接收子组件传递的数据 123
　　　　‘abc‘:function(){
　　　　　　//作用域 vue的实例化对象
　　　　　　//参数就是[123]
　　　　}
　　}
})