-
将一个页面分割成若干个组件，一个页面js+css+html,将自己类容分割出来，方便开发，更好了维护我们的代码，每个组件封装自己的js+html+css,样式命名冲突
组件分类
-
页面级组件（ 例如详情页页面）
-
基础组件（页面的一部分，例如轮播图）
-
组件的目的为了实现复用
指令和组件
-
在标签内增加的行内属性，实现功能指令
-
组件就是一个自定义（扩展）的标签<hello></hello>，封装代码的,组件的标签名不能破坏原有的html标签
组件：全局组件（不需要引用），局部组件（需要引用）
-
在vue中一个对象就是一个组件
-
在组件中data是一个函数，目的是不受别人干扰，因为组件是独立的
-
使用组件的步骤，
-
1.声明组件，并且引入到当前页面
-
2.在组件的父级模板中调用这个组件
-
组件名称不能和标签相同
-
-
全局组件
-
Vue.component('my-handsone',{ //template只会有一个根元素，而且不能直接放置文本节点 template:'<h1>{{msg}}</a></h1>', data(){ return { //可以用来定义数据 msg:"帅吗", types:[1,2,3] } } }); let vm=new Vue({ el:"#app", data:{} }) - 局部组件
-
//一个对象就是一个组件 let webeautiful={ template:'<h1>{{msg}}</h1>', data(){ return { msg:"很帅呀" } } }; let vm=new Vue({ el:"#app", //挂载在vue实例中components components:{ webeautiful } })
-
父传子属性传递 子组件通过props接收
-
props的api
-
type 接收数据的类型
-
default 默认数据的值
-
required 必须传递数据 不能和default同时引用
-
validator 自定义验证
-
-
子传父组件，事件触发 $emit->@方法="父组件的方法"
-
平级交互 eventBus 但是不用 -vuex
-
父组件调用子类的方法 ref=>this.$ref.xxx.子类方法
-
slot 插槽 （设置一些空闲的位置等等使用）
父亲传递给儿子数据
-
先在儿子组件上绑定一个属性名，然后赋值给这个属性 :m="msg",
-
儿子接受父亲传递的数据，用props接收传递的属性名字，例如 props:{m:{type:Array}}
-
// 父亲到儿子，默认组件是独立的，相互不能引用数据，可以通过属性方式传递给儿子 let vm=new Vue({ el:"#app", //根实例上的data都是对象，组件中的都是函数 data:{ money:100 }, //父级传递给子集数据通过绑定属性,如果传递多个可以数组中写多个 template:'<div><child :m="money" o="美女"></child></div>', components:{ child:{ //子集接收给父级给的数据，通过props属性接收 props:['m','o'], computed:{ b(){ //这里的this指向子集child //父亲的数据儿子不能更改 错误写法 this.o="丑呀" return "大大"+this.o; } }, template:"<div>儿子 {{m}} {{b}}</div>" } } })
-
儿子通过自定义事件方法中给父亲发射自己的数据
-
先在儿子组件实例中created中发射一个数据
-
例如 created(){//传递自己的数据
this.$emit('childs',this.msg);}
-
-
在儿子组件上要绑定这个自定义事件方法，然后里面赋值父亲接收的函数
-
例如儿子组件 <child @childs="父亲接收的函数"></child>
-
-
最后父亲接收的函数很简单，参数就是儿子传递的数据
-
例如父亲接收的函数 fn(data){//这里面的data就是儿子发射给父亲的参数}
-
//实例化一个Vue函数 let vm=new Vue({ //child 是儿子 触发了自己的一个方法，绑定了父亲的一个函数方法 template:'<div><child @childs="say"></child></div>', //方法挂载 methods:{ //父亲的一个方法 say(data){ console.log(data); } }, //定义一个儿子组件 components:{ //儿子名字 child:{ //事件和数据初始化之后 created(){ //儿子发射一个方法 传递自己的数据 this.$emit('childs',this.msg); }, template:'<div>子</div>', data(){ return { msg:"我饿了" } }, } }, }).$mount("#app"); //手动将vue挂载在#app标签上
-
父亲和儿子实现双向数据绑定
父亲传递给儿子数据，儿子触发一个父亲方法，将最新的值传递给父亲，父亲更改后，属性会重新传递儿子，儿子会刷新
-
父亲先在儿子组件上通过绑定一个属性，然后给这个属性赋值，给儿子传递数据
-
例如<child :m="msg"></child>
-
-
儿子接收父亲的传递的数据props
-
props:{m:{type=Array}}
-
-
儿子拿到数据后，要修改数据，（儿子无法把父亲传递的参数重新赋值）
-
然后儿子重新发射一个自定义事件方法,后面跟要修改的值
-
this.$emit("ee",1000);
-
-
此时儿子组件上要绑定发射的自定义方法，赋值父亲的接收的函数fn
-
<child :m="msg" @ee="fn"></child>
-
-
父亲接收函数，参数就是儿子发射过来的数据
-
fn(data){//此时把儿子发射过来的数据data，重新赋值给第一次传递过去的msgreturn this.msg=data;}
-
-
这样就成功了实现父与子之间的数据双向绑定
-
let vm = new Vue({ el:'#app', //通过在儿子组件上绑定一个属性向儿子传递数据 // @ee="fn" 接收儿子传递过来数据，ee是儿子那边自定义的事件方法，必须绑定在儿子组件上 template:'<div>父亲+{{money}}<child :m="money" @ee="fn"></child></div>', data:{ money:100 }, methods:{ fn(data){ //父亲接收儿子的数据函数 return this.money=data; } }, components:{ child:{ //接收父亲传递过来的属性值 props:{m:{}}, template:'<div>{{m}}<button @click="more"></button></div>', methods:{ more(){ //向父亲发射一个自定义方法，并传递过去自己的值 this.$emit('ee',1000) } } } } })
-
父亲先通过在儿子身上绑定一个属性，向儿子传递数据
-
这时候，属性后面我们跟一个sync修饰符
-
例如 <child :m.sync="msg"></child>
-
-
这时候，儿子要通过props接受父亲传递的参数
-
props:{
m:{
type:Array //规定是数据类型
}}
-
-
儿子接受到数据，发现不满意，发射一个自定义事件方法给父亲
-
this.$emit('update:m',1000);
-
-
此时我们发现父亲的数据m自动更改了，变成1000
-
-
let vm = new Vue({ el:'#app', template:'<div>父{{msg}}<child :a.sync="msg"/></div>', data:{ msg:'美女' }, components:{ child:{ props:['a'], //<comp :foo="bar" @update:foo="val => bar = val"></comp> template:'<div>child {{a}} <button @click="change">换</button></div>', methods:{ change(){ //固定的写法 //2.3.0版本以后才会用 //用了sync，下面必须用update this.$emit('update:a','丑女'); } } } } })
第一步先定义儿子有一个fn方法
methods:{fn(){ console.log("王阿姨好漂亮"); }}
第二步在儿子身上标记一个表示ref
<child ref="msg"></child>
第三步父亲在视图加载完成后，调用儿子的fn方法
mounted(){this.$refs.msg.fn();}
this.$refs.msg 调用儿子身上的msg表示，这时候this.$refs.msg指向的就是儿子的实例
实例.fn() 这就调用到了儿子的fn方法
-
// ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例 let vm=new Vue({ el:"#app", template:'<child ref="c"></child>', //一定要放在mounted下面，因为mounted方法表示数据和视图渲染完成， mounted(){ //当前的ref指向的是child组件的实例，通过实例调用下面的fn方法 this.$refs.c.fn(); }, components:{ child:{ template:'<div>child</div>', methods:{ fn(){ alert("王阿姨好漂亮") } } } } })
兄弟组件之间的数据通讯（就是平级组件之间的数据通讯）
-
兄弟组件之间数据互通，要借助第三个vue实例
-
eventBus使用起来不好管理，命名冲突，而且复杂，一般不用
-
我们通常叫这个实例叫eventBus
-
let eventBus=new Vue;
-
-
将兄弟发射的自定义事件方法，挂载到eventBus实例上
-
eventBus.$emit('aa',''c');
-
-
然后通过$on方法，将兄弟发射的自定义事件方法绑定里面去
-
后面的回调函数一定要是箭头函数，不改变实例的this,方便赋值
-
例如 eventBus.$on('aa',(data)=>{console.log(data)
let eventBus=new Vue; //eventBus使用起来不好管理，命名冲突，而且复杂，一般不用 let C={ template:'<div>{{val}}<button @click="ss">变C</button></div>', data(){ return { val:"C" } }, methods:{ ss(){ eventBus.$emit('bb','C'); } }, created(){ // eventBus.$on('aa',(data)=>{ this.val=data; }) } }; let D={ template:'<div>{{val}}<button @click="ee">变D</button></div>', data(){ return { val:"D" } }, created(){ // eventBus.$on("bb",(data)=>{ this.val=data; }) }, methods:{ ee(){ // eventBus.$emit('aa','D'); } } } let vm = new Vue({ el:'#app', //1,找共同父级，时间交互，非常复杂，不采用 template:'<div><C></C><D></D></div>', data:{ }, components:{ C, D } })
slot 可以将不同的标签分开发送到指定的节点中
slot 有一个name属性
slot上的name属性，有一个默认值default
没有指定slot名字的都叫default 会塞到name=default的组件内
<div id="app"> <hello> 123 <ul slot="bottom"> <li>我很帅</li> </ul> <ul slot="top"> <li>你丑</li> </ul> 456 </hello> </div> <template id="hello"> <div> <!--slot是vue提供的内置插件，具名slot 在写内容时第一预留出来slot插口,如果没有使用则使用默认内容，没有指定slot名字的都叫default 会塞到name=default的组件内--> <slot name="default">nihao </slot> <slot name="top">这是上</slot> <slot name="bottom">这是下</slot> </div> </template> <script> let vm = new Vue({ el:'#app', components:{ hello:{ template:'#hello' } } }) </script>-
transition有一个name属性
-
假设我们name="fade"
-
-
transition动画组件对应三个css样式
-
进入开始 .fade-enter 的样式
-
开始过渡阶段 .fade-enter-active
-
出去终点 .fade-leave-active
-
这三个样式里面，我们可以任意写样式
如果文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>
-
-
-