當(dāng)前位置：首頁 > news >正文

長春二道網(wǎng)站建設(shè)百度明星搜索量排行榜

news 2025/7/9 1:45:55

長春二道網(wǎng)站建設(shè),百度明星搜索量排行榜,網(wǎng)絡(luò)營銷推廣的方式有哪些?,專業(yè)的網(wǎng)站建設(shè)公司排名目錄前言一，組件的使用二，插槽slot三，refs和parent四，父子組件間的通信4.1，父傳子 ：父傳子的時候，通過屬性傳遞4.2，父組件監(jiān)聽自定義事件五，非父子組件的通信六&#x…

- - 前言
  - 一，組件的使用
  - 二，插槽slot
  - 三，refs和parent
  - 四，父子組件間的通信
  - - 4.1，父傳子：父傳子的時候，通過屬性傳遞
    - 4.2，父組件監(jiān)聽自定義事件
  - 五，非父子組件的通信
  - 六，混入（mixin）
  - 最后

前言

上一章博客我們講解了Vue生命周期,列表過濾,計算屬性和監(jiān)聽器
這一章我們來講Vue組件開發(fā)

一，組件的使用

創(chuàng)建組件兩種方式

var Header = { template:'模板' , data是一個函數(shù),methods:功能,components:子組件們 
}//局部聲明Vue.component('組件名',組件對象);//全局注冊 等于注冊加聲明了

組件的分類

通用組件（例如表單、彈窗、布局類等) (多個項目都可以復(fù)用)
業(yè)務(wù)組件（抽獎、機器分類）（本項目中復(fù)用）
頁面組件（單頁面開發(fā)程序的每個頁面的都是一個組件、只完成功能、不復(fù)用）

組件開發(fā)三部曲：聲明、注冊、使用

注意：子組件的命名，如果有駝峰命名，在使用子組件標(biāo)簽時用“-”隔開

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye></saybyebye></div><template id="myhello"><div>hello,{{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留下的坑位，以便于父組件在使用子組件的時候可以在坑位里動態(tài)的插入自己的內(nèi)容。

? 并且，坑位是可以命名的，也就是說，子組件在聲明的時候命名坑位，方便父組件在指定的坑位中插入內(nèi)容

? slot是動態(tài)的DOM

插槽的使用：
- 步驟有兩步：a.子組件上留坑。b.父組件使用子組件的時候，給坑里賦值.
- 要有父子組件作為前提。
- 目的是讓子組件成為動態(tài)的組件。

匿名插槽
- 匿名插槽就是在聲明的時候沒有聲明name，會把全部內(nèi)容都顯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye><div>我是插槽的內(nèi)容</div></saybyebye></div><template id="myhello"><div>hello,{{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>你好</div>// 插槽內(nèi)容<slot></slot>    </div>`}var app = new Vue({el:'#app',data(){return{name:"張三",}},// 注冊局部組件components:{saybyebye}})</script>
</html>

在這里插入圖片描述
具名插槽

具名插槽會在聲明時，指定name。會在子組件中有選擇的進行展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye><div slot="niu1">我是插槽的內(nèi)容</div><template #niu2><div>你好niu2</div></template><template v-slot:niu3><div>你好niu3</div></template></saybyebye></div><template id="myhello"><div>hello,{{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><slot name="niu1"></slot>   <div>你好niu1</div>// 插槽內(nèi)容<slot name="niu2"></slot>    <slot name="niu3"></slot>    </div>`}var app = new Vue({el:'#app',data(){return{name:"張三",}},// 注冊局部組件components:{saybyebye}})</script>
</html>

在這里插入圖片描述

三，refs和parent

這兩個屬性的作用是獲取到子組件實例數(shù)組和父組件實例。
有了實例，就可以很方便的操作組件的屬性和方法。

refs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{name}}<button @click="ouda">打一頓</button><Myheader ref="dawa"></Myheader></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.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>
</html>

在這里插入圖片描述

parent

$refs的使用需要，在子元素上通過ref屬性聲明自己的引用名稱

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,我是{{name}}<Myheader ref="dawa"></Myheader><Myheadererwa ref="erwa" ></Myheadererwa></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div></div>`,}var Myheadererwa = {template:`<div><button @click="jiao">叫爺爺</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，父傳子：父傳子的時候，通過屬性傳遞

在子組件標(biāo)簽中，自定義屬性和值

<Myheader ref="header" age="18" :sex="sex"></Myheader>

在子組件內(nèi)部，通過props屬性，獲取所有的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{name}}<button @click="ouda">打一頓</button><button @click="anwei">安慰</button><button @click="xiaodao">看看導(dǎo)哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子組件{{xingming}}--{{Hp}}</div>`,data(){return{xingming:'林宇豪',Hp:100,}},}var Myheadererwa = {template:`<div>子組件{{xingming}}--{{Hp}}<button @click="jiao">叫爺爺</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王導(dǎo)',Hp:0,}},methods:{see(){console.log("再看島國動作片");},jiao(){this.$parent.name="爺爺"},},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭頭函數(shù)，可以不改變this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{name:'小豪',nengli2:"千里眼,順風(fēng)耳"}},methods:{ouda(){console.log("孽子，打一頓");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已經(jīng)死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌，安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },},components:{Myheader,Myheadererwa}})</script>
</html>

在這里插入圖片描述

4.2，父組件監(jiān)聽自定義事件

      <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一頓</button><button @click="anwei">安慰</button><button @click="xiaodao">看看導(dǎo)哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子組件{{xingming}}--{{Hp}}<button @click="chuanzhi">發(fā)送一條信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}}}var Myheadererwa = {template:`<div>子組件{{xingming}}--{{Hp}}<button @click="jiao">叫爺爺</button>  <button @click="happyNewYear">給爺爺拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王導(dǎo)',Hp:0,}},methods:{see(){console.log("再看島國動作片");},jiao(){this.$parent.name="爺爺"},happyNewYear(){// 觸發(fā)自定義事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭頭函數(shù)，可以不改變this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,順風(fēng)耳"}},methods:{ouda(){console.log("孽子，打一頓");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已經(jīng)死了不能在死了爹"// }},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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一頓</button><button @click="anwei">安慰</button><button @click="xiaodao">看看導(dǎo)哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子組件{{xingming}}--{{Hp}}<button @click="chuanzhi">發(fā)送一條信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}}}var Myheadererwa = {template:`<div>子組件{{xingming}}--{{Hp}}<button @click="jiao">叫爺爺</button>  <button @click="happyNewYear">給爺爺拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王導(dǎo)',Hp:0,}},methods:{see(){console.log("再看島國動作片");},jiao(){this.$parent.name="爺爺"},happyNewYear(){// 觸發(fā)自定義事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭頭函數(shù)，可以不改變this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,順風(fēng)耳"}},methods:{ouda(){console.log("孽子，打一頓");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已經(jīng)死了不能在死了爹"// }},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>

在這里插入圖片描述

創(chuàng)建一個公共組件

Vue.prototype.$middleBus = new Vue();

發(fā)送方，在公共組件上，觸發(fā)一個事件

this.$middleBus.$emit('sendMsg','你好child01,我是child02');

接收方，監(jiān)聽公共組件上的這個事件，并接受數(shù)據(jù)

this.$middleBus.$on('sendMsg',val=>{// 使用箭頭函數(shù)，可以不改變this的指向，仍然和外部的this保持一致，指向child01this.msg = val;
});

六，混入（mixin）

定義
- 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項
寫法
- 局部
  - 定義個混入對象


var myMixin = {data() {return {mixinname: '混入姓名',};},mounted() {console.log('我是混入的組件');},
};

項目

mixins: [myMixin],

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一頓</button><button @click="anwei">安慰</button><button @click="xiaodao">看看導(dǎo)哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var commonMixin = {data(){return{mixinName:'葫蘆'}},mounted(){console.log( "混入對象" +this.mixinName);}}var Myheader = {template:`<div>子組件{{xingming}}--{{Hp}}---{{mixinName}}<button @click="chuanzhi">發(fā)送一條信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}},mixins:[commonMixin]}var Myheadererwa = {template:`<div>子組件{{xingming}}--{{Hp}}<button @click="jiao">叫爺爺</button>  <button @click="happyNewYear">給爺爺拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王導(dǎo)',Hp:0,}},methods:{see(){console.log("再看島國動作片");},jiao(){this.$parent.name="爺爺"},happyNewYear(){// 觸發(fā)自定義事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭頭函數(shù)，可以不改變this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,順風(fēng)耳"}},methods:{ouda(){console.log("孽子，打一頓");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已經(jīng)死了不能在死了爹"// }},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);

注意

當(dāng)組件和混入對象含有同名選項時，這些選項將進行“合并”
在選項發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先
請謹慎使用全局混入，因為會使實例以及每個組件受影響

最后

祝大家： 愿每個人都能遵循自己的時鐘，做不后悔的選擇。

查看全文

http://www.risenshineclean.com/news/5782.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

長春二道網(wǎng)站建設(shè)百度明星搜索量排行榜

目錄

前言

一，組件的使用

二，插槽slot

三，refs和parent

四，父子組件間的通信

4.1，父傳子：父傳子的時候，通過屬性傳遞

4.2，父組件監(jiān)聽自定義事件

五，非父子組件的通信

六，混入（mixin）

最后

相關(guān)文章：

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

目錄

前言

一，組件的使用

二，插槽slot

三，refs和parent

四，父子組件間的通信

4.1，父傳子 ：父傳子的時候，通過屬性傳遞

4.2，父組件監(jiān)聽自定義事件

五，非父子組件的通信

六，混入（mixin）

最后

相關(guān)文章：

4.1，父傳子：父傳子的時候，通過屬性傳遞