组件、组件的基本使用、组件嵌套定义、组件属性、组件的事件、组件的内容、组件间的通信

组件的概念：

组件是自定义标签，vueJS提供的组件可以让程序员自定义标签，对页面进行模块化。
每个标签里包含HTML，CSS，JS。组件封装的是完整的功能（包括：HTML、CSS、JS），
而函数只封装JS（逻辑） vue的组件就是一个vue对象。
（vue的两大核心：数据驱动，组件化）。vue对象的配置项，在vue组件里也可以使用。

vue组件的基本使用（标签名）：

定义组件：

let 组件变量名= Vue.extend({template:'<div class="header">{{msg}}，我是header组件div>'data:function(){return {msg:”hi”}},});

简化写法：
let 组件变量名={配置项
}; 

注册组件：

全局注册：
Vue.component('标签名',组件变量名);

 局部注册：//在vue对象的components选项里进行注册
new Vue({el:components:{组件名：组件变量名}     
});

使用组件：

组件就是自定义标签，所以，使用组件，就跟使用标签是同样的。<组件名>组件名>

组件嵌套：

把一个组件的标签写在另外一个组件的template里，就是组件嵌套。

 //子组件 let myComSon = {template:"<div>我是son里的div：{{msg}}div>",    data:function(){return {msg:"hi：son"}}};//父组件let myComParent = {template:`<div><p>我是p：{{msg}}p><my-com-son>my-com-son>                    div>`,data:function(){return {msg:"hi"}},components:{// 局部注册了另外一个组件"my-com-son":myComSon}    };

组件的属性

组件的属性（标签的属性）

使用props（property的简写）来完成组件属性的声明。 
props是外部给组件传入的数据。而组件的data是组件内部的数据。

使用 Prop 传递静态数据

组件内部增加配置项 props来声明组件里的属性。
props里面可以声明多个属性，所以，是个数组。let myComParent = {props:["name","sex"], //声明了两个自定义属性template:`<div><p>我是p：{{msg}}p>     <p>人的信息:p>             <p>姓名:{{name}}p>             <p>性别:{{sex}}p>             div>`,data:function(){return {msg:"hi"}} };

使用组件时，给属性传入数据：

使用组件时，给属性传入值，传入的值，就可以在组件内部使用
<my-com-parent name="张三疯他哥" sex="男">my-com-parent>

动态Prop

组件属性和官方标签的属性是同样的道理，所以，
给组件的属性也可以v-bind 数据。即：绑定动态的数据
<my-com-parent v-bind:name="name" sex="男">my-com-parent>	

Prop 验证

  props:{"name":{type:String, //限制name属性的类型是字符串required:true //限制name属性是必须传入值的。},"sex":[String,Number], //限制sex属性的值可以为字符串，也可以为数字"age":{type:Number, //限制age属性的类型是数字型default:10 // age属性的默认值是10 。如果没有给age传值，那么age就是10。},"isadult":Boolean},

单向数据流

Prop 是单向绑定的：当父组件的属性（数据）变化时，将传导给子组件，但是反过来不会。
这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
​另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。
这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。    

组件的事件

绑定事件（父组件里写）：

 HTML（标签）里的绑定方式：v-on
​ JS（Vue）里绑定方式： vue对象.$on(“事件名”)

触发事件（子组件里写)： vue对象.$emit(“事件名”,参数);

组件的内容(插槽)

 组件的内容就是标签的innerHTML。vueJS里使用**Slot(插槽)**分发内容。props用来处理标签的属性 ，slot用来处理标签的内容。
​ 将父组件的内容（DOM）放到子组件指定的位置叫作内容分发。

单个插槽

 //子组件let person = {      template:`<div><hr/><p>我是上pp><slot>slot><p>我时下pp><hr/>div>`};
//父组件：<div id="app"><person><div>我是divdiv>person>        div>new Vue({el:"#app",components:{person}});

多个插槽

  let person = {      template:`<div><hr/><p>我是上pp><slot name="s1">slot><p>我是中pp><slot name="s2">slot><p>我是下pp><hr/>div>`};
//父组件<div id="app"><person><div slot="s1">我是div1div><div slot="s2">我是div2div>person>        div>new Vue({el:"#app",components:{person}});

编译作用域

 父组件模板的内容在父组件作用域内(父组件对应的对象的作用域)编译；子组件模板的内容在子组件作用域内编译。

组件间的通信

1.父子组件：父---> 子： props，  子---> 父：事件
2.父给子组件：refs
3.兄弟组件，或者无关组件：事件总线，集中管理，vueX等

refs
首先，需要知道：用标签的方式使用组件（如：<my-com/>）,实际就是创建了组件对象.
只要拿到组件对象，那么组件对象里的methods就可以使用。refs是vue中获取dom的一种方式，
dom也就是标签，标签就是组件对象。
即就是：拿到了dom，就相当于拿到了组件对象（这段话需要慢慢品……）如果某个元素使用ref属性，那么，在vue对象里，就能用this.$refs  访问。
可以认为是给元素增加了个id属性，在vue里就可以操作该dom了<p ref = "pId"> {{msg}}p>methods:{testf:function(){this.$refs.pId.innerHTML = "hi";}
}

事件总线（event-bus）event-bus实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。
它是实现非父子组件（也是任何无关组件，其实，也可以实现父子）通信的一种解决方案。1、单独new一个Vue空对象：  let bus= new Vue();
2、在组件A里，绑定一个自定义事件(相当于定义了一个自定义事件)：bus.$on('eclick',target => {console.log(target)　})
3、在组件B里，触发事件bus.$emit('eclick',"b传给a的");

集中管理（$root)
把数据存到根实例的data选项，其他组件直接修改或者使用//子组件内部
this // 子组件本身
this.$root // vm 根实例
this.xx //组件内部数据
this.$root.a //根实例数据

动态组件有的时候，在不同组件之间进行动态切换是非常有用的。即页面的某个位置要显示的组件是不确定的，是会变化的。
<component  :is="组件名变量">

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！