南宁企业建站模板,电子商务有限公司名字大全,秦皇岛哪家公司网站建设好,网络策划专业目录 前言一#xff0c;组件的使用二#xff0c;插槽slot三#xff0c;refs和parent四#xff0c;父子组件间的通信4.1#xff0c;父传子 #xff1a;父传子的时候#xff0c;通过属性传递4.2#xff0c;父组件监听自定义事件 五#xff0c;非父子组件的通信六#x… 目录 前言一组件的使用二插槽slot三refs和parent四父子组件间的通信4.1父传子 父传子的时候通过属性传递4.2父组件监听自定义事件 五非父子组件的通信六混入mixin最后 前言
上一章博客我们讲解了Vue生命周期,列表过滤,计算属性和监听器 这一章我们来讲Vue组件开发
一组件的使用
创建组件两种方式
var Header { template:模板 , data是一个函数,methods:功能,components:子组件们
}//局部声明Vue.component(组件名,组件对象);//全局注册 等于注册加声明了组件的分类
通用组件例如表单、弹窗、布局类等) (多个项目都可以复用)业务组件抽奖、机器分类本项目中复用页面组件单页面开发程序的每个页面的都是一个组件、只完成功能、不复用
组件开发三部曲声明、注册、使用
注意子组件的命名如果有驼峰命名在使用子组件标签时用“-”隔开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好,{{name}}hello/hellosaybyebye/saybyebye/divtemplate idmyhellodivhello,{{name}}/div/template
/body
script src../js/vue2.7.js/script
script// 注册了一个全局组件名字叫helloVue.component(hello,{template:#myhello,data(){return{name:我是hello}}})// 定义一个局部组件var saybyebye{template:div你好/div}var app new Vue({el:#app,data(){return{name:张三,}},// 注册局部组件components:{saybyebye}})/script
/html二插槽slot
slot就是在声明子组件时给DOM留下的坑位以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。
并且坑位是可以命名的也就是说子组件在声明的时候命名坑位方便父组件在指定的坑位中插入内容
slot是动态的DOM
插槽的使用 步骤有两步a.子组件上留坑。b.父组件使用子组件的时候给坑里赋值.要有父子组件作为前提。目的是让子组件成为动态的组件。
匿名插槽 - 匿名插槽就是在声明的时候没有声明name会把全部内容都显
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好,{{name}}hello/hellosaybyebyediv我是插槽的内容/div/saybyebye/divtemplate idmyhellodivhello,{{name}}/div/template
/body
script src../js/vue2.7.js/script
script// 注册了一个全局组件名字叫helloVue.component(hello,{template:#myhello,data(){return{name:我是hello}}})// 定义一个局部组件var saybyebye{template:divdiv你好/div// 插槽内容slot/slot /div}var app new Vue({el:#app,data(){return{name:张三,}},// 注册局部组件components:{saybyebye}})/script
/html具名插槽
具名插槽会在声明时指定name。会在子组件中有选择的进行展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好,{{name}}hello/hellosaybyebyediv slotniu1我是插槽的内容/divtemplate #niu2div你好niu2/div/templatetemplate v-slot:niu3div你好niu3/div/template/saybyebye/divtemplate idmyhellodivhello,{{name}}/div/template
/body
script src../js/vue2.7.js/script
script// 注册了一个全局组件名字叫helloVue.component(hello,{template:#myhello,data(){return{name:我是hello}}})// 定义一个局部组件var saybyebye{template:divslot nameniu1/slot div你好niu1/div// 插槽内容slot nameniu2/slot slot nameniu3/slot /div}var app new Vue({el:#app,data(){return{name:张三,}},// 注册局部组件components:{saybyebye}})/script
/html三refs和parent
这两个属性的作用是获取到子组件实例数组和父组件实例。 有了实例就可以很方便的操作组件的属性和方法。
refs
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好{{name}}button clickouda打一顿/buttonMyheader refdawa/Myheader/div
/body
script src../js/vue2.7.js/script
scriptVue.prototype.$middleBus new Vue();var Myheader {template:div子组件{{xingming}}--{{Hp}}/div,data(){return{xingming:林宇豪,Hp:100,}},}var app new Vue({el:#app,data(){return{name:小豪,}},methods:{ouda(){console.log(孽子打一顿);this.$refs.dawa.Hp this.$refs.dawa.Hp - 10},},components:{Myheader}})/script
/htmlparent
$refs的使用需要在子元素上通过ref属性声明自己的引用名称
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好,我是{{name}}Myheader refdawa/MyheaderMyheadererwa referwa /Myheadererwa/div
/body
script src../js/vue2.7.js/script
scriptVue.prototype.$middleBus new Vue();var Myheader {template:div/div,}var Myheadererwa {template:divbutton clickjiao叫爷爷/button /div,data(){return{ }},methods:{jiao(){this.$parent.name爷爷}, },}var app new Vue({el:#app,data(){return{name:小豪,}},components:{Myheader,Myheadererwa}})/script
/html四父子组件间的通信
4.1父传子 父传子的时候通过属性传递
在子组件标签中自定义属性和值
Myheader refheader age18 :sexsex/Myheader在子组件内部通过props属性获取所有的值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好{{name}}button clickouda打一顿/buttonbutton clickanwei安慰/buttonbutton clickxiaodao看看导哥在干嘛/buttonMyheader refdawa/MyheaderMyheadererwa referwa age2 :nenglinengli2/Myheadererwadiv idmydiv/div/div
/body
script src../js/vue2.7.js/script
scriptVue.prototype.$middleBus new Vue();var Myheader {template:div子组件{{xingming}}--{{Hp}}/div,data(){return{xingming:林宇豪,Hp:100,}},}var Myheadererwa {template:div子组件{{xingming}}--{{Hp}}button clickjiao叫爷爷/button 二娃 {{age}} -- {{nengli}}/div,data(){return{ xingming:王导,Hp:0,}},methods:{see(){console.log(再看岛国动作片);},jiao(){this.$parent.name爷爷},},mounted(){this.$middleBus.$on(jieshou,val{// 使用箭头函数可以不改变this的指向仍然和外部的this保持一致指向child01console.log(val);});},props:[age,nengli],}var app new Vue({el:#app,data(){return{name:小豪,nengli2:千里眼,顺风耳}},methods:{ouda(){console.log(孽子打一顿);this.$refs.dawa.Hp this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp0){// document.getElementById(#mydiv).innerHTML已经死了不能在死了爹// }},anwei(){console.log(抽了一巴掌安慰了一下);this.$refs.erwa.Hp this.$refs.erwa.Hp 10},xiaodao(){this.$refs.erwa.see() },},components:{Myheader,Myheadererwa}})/script
/html 4.2父组件监听自定义事件 Myheadererwa to-parent-eventbainian referwa age2 :nenglinengli2/Myheadererwa!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好{{changname}}button clickouda打一顿/buttonbutton clickanwei安慰/buttonbutton clickxiaodao看看导哥在干嘛/buttonMyheader refdawa/MyheaderMyheadererwa to-parent-eventbainian referwa age2 :nenglinengli2/Myheadererwadiv idmydiv/div/div
/body
script src../js/vue2.7.js/script
scriptVue.prototype.$middleBus new Vue();var Myheader {template:div子组件{{xingming}}--{{Hp}}button clickchuanzhi发送一条信息/button /div,data(){return{xingming:林宇豪,Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit(jieshou,你好child01,我是child02);}}}var Myheadererwa {template:div子组件{{xingming}}--{{Hp}}button clickjiao叫爷爷/button button clickhappyNewYear给爷爷拜年/button 二娃 {{age}} -- {{nengli}}/div,data(){return{ xingming:王导,Hp:0,}},methods:{see(){console.log(再看岛国动作片);},jiao(){this.$parent.name爷爷},happyNewYear(){// 触发自定义事件this.$emit(to-parent-event,this.xingming)}},mounted(){this.$middleBus.$on(jieshou,val{// 使用箭头函数可以不改变this的指向仍然和外部的this保持一致指向child01console.log(val);});},props:[age,nengli],}var app new Vue({el:#app,data(){return{changname:小豪,nengli2:千里眼,顺风耳}},methods:{ouda(){console.log(孽子打一顿);this.$refs.dawa.Hp this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp0){// document.getElementById(#mydiv).innerHTML已经死了不能在死了爹// }},anwei(){console.log(抽了一巴掌安慰了一下);this.$refs.erwa.Hp this.$refs.erwa.Hp 10},xiaodao(){this.$refs.erwa.see() },bainian(xingming){console.log(xingming给您拜年了 );}},components:{Myheader,Myheadererwa}})/script
/html 五非父子组件的通信
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好{{changname}}button clickouda打一顿/buttonbutton clickanwei安慰/buttonbutton clickxiaodao看看导哥在干嘛/buttonMyheader refdawa/MyheaderMyheadererwa to-parent-eventbainian referwa age2 :nenglinengli2/Myheadererwadiv idmydiv/div/div
/body
script src../js/vue2.7.js/script
scriptVue.prototype.$middleBus new Vue();var Myheader {template:div子组件{{xingming}}--{{Hp}}button clickchuanzhi发送一条信息/button /div,data(){return{xingming:林宇豪,Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit(jieshou,你好child01,我是child02);}}}var Myheadererwa {template:div子组件{{xingming}}--{{Hp}}button clickjiao叫爷爷/button button clickhappyNewYear给爷爷拜年/button 二娃 {{age}} -- {{nengli}}/div,data(){return{ xingming:王导,Hp:0,}},methods:{see(){console.log(再看岛国动作片);},jiao(){this.$parent.name爷爷},happyNewYear(){// 触发自定义事件this.$emit(to-parent-event,this.xingming)}},mounted(){this.$middleBus.$on(jieshou,val{// 使用箭头函数可以不改变this的指向仍然和外部的this保持一致指向child01console.log(val);});},props:[age,nengli],}var app new Vue({el:#app,data(){return{changname:小豪,nengli2:千里眼,顺风耳}},methods:{ouda(){console.log(孽子打一顿);this.$refs.dawa.Hp this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp0){// document.getElementById(#mydiv).innerHTML已经死了不能在死了爹// }},anwei(){console.log(抽了一巴掌安慰了一下);this.$refs.erwa.Hp this.$refs.erwa.Hp 10},xiaodao(){this.$refs.erwa.see() },bainian(xingming){console.log(xingming给您拜年了 );}},components:{Myheader,Myheadererwa}})/script
/html 创建一个公共组件
Vue.prototype.$middleBus new Vue();发送方在公共组件上触发一个事件
this.$middleBus.$emit(sendMsg,你好child01,我是child02);接收方监听公共组件上的这个事件并接受数据
this.$middleBus.$on(sendMsg,val{// 使用箭头函数可以不改变this的指向仍然和外部的this保持一致指向child01this.msg val;
});六混入mixin 定义 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项 写法 局部 定义个混入对象 var myMixin {data() {return {mixinname: 混入姓名,};},mounted() {console.log(我是混入的组件);},
};项目
mixins: [myMixin],!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp大家好{{changname}}button clickouda打一顿/buttonbutton clickanwei安慰/buttonbutton clickxiaodao看看导哥在干嘛/buttonMyheader refdawa/MyheaderMyheadererwa to-parent-eventbainian referwa age2 :nenglinengli2/Myheadererwadiv idmydiv/div/div
/body
script src../js/vue2.7.js/script
scriptVue.prototype.$middleBus new Vue();var commonMixin {data(){return{mixinName:葫芦}},mounted(){console.log( 混入对象 this.mixinName);}}var Myheader {template:div子组件{{xingming}}--{{Hp}}---{{mixinName}}button clickchuanzhi发送一条信息/button /div,data(){return{xingming:林宇豪,Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit(jieshou,你好child01,我是child02);}},mixins:[commonMixin]}var Myheadererwa {template:div子组件{{xingming}}--{{Hp}}button clickjiao叫爷爷/button button clickhappyNewYear给爷爷拜年/button 二娃 {{age}} -- {{nengli}}/div,data(){return{ xingming:王导,Hp:0,}},methods:{see(){console.log(再看岛国动作片);},jiao(){this.$parent.name爷爷},happyNewYear(){// 触发自定义事件this.$emit(to-parent-event,this.xingming)}},mounted(){this.$middleBus.$on(jieshou,val{// 使用箭头函数可以不改变this的指向仍然和外部的this保持一致指向child01console.log(val);});},props:[age,nengli],}var app new Vue({el:#app,data(){return{changname:小豪,nengli2:千里眼,顺风耳}},methods:{ouda(){console.log(孽子打一顿);this.$refs.dawa.Hp this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp0){// document.getElementById(#mydiv).innerHTML已经死了不能在死了爹// }},anwei(){console.log(抽了一巴掌安慰了一下);this.$refs.erwa.Hp this.$refs.erwa.Hp 10},xiaodao(){this.$refs.erwa.see() },bainian(xingming){console.log(xingming给您拜年了 );}},components:{Myheader,Myheadererwa}})/script
/html全局混入
定义个混入对象引入使用
Vue.mixin(myMixin);注意
当组件和混入对象含有同名选项时这些选项将进行“合并”在选项发生冲突时以组件数据优先请谨慎使用全局混入因为会使实例以及每个组件受影响
最后
祝大家 愿每个人都能遵循自己的时钟做不后悔的选择。
