本篇文章為大家展示了Vue 中怎么實(shí)現(xiàn)全局變量和局部變量,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專(zhuān)注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),網(wǎng)站模板,微信公眾號(hào)開(kāi)發(fā),軟件開(kāi)發(fā),微信小程序開(kāi)發(fā),十年建站對(duì)成都門(mén)窗定制等多個(gè)方面,擁有多年建站經(jīng)驗(yàn)。局組件和局部組件
1.先定義組件 Vue.component('組件名', { 組件模板對(duì)象 })
注意: 組件名不要使用原生的標(biāo)簽名, 若組件名定義時(shí)用的是駝峰命名法, 則調(diào)用時(shí)用中劃線分割后小寫(xiě)
例如: 組件-->mtText 使用時(shí)--> <my-text></my-text>
2.配置組件的模板 注意: 組件的模板內(nèi)容有且只有一個(gè)根元素
3.在視圖層里調(diào)用 ,用雙標(biāo)簽
4.組件是一個(gè)獨(dú)立的作用域, 也可以看成一個(gè)特殊的vue實(shí)例, 可以有data, methods,computed等等
注意: 組件的data是函數(shù), 函數(shù)中需要返回一個(gè)對(duì)象作為組件的data
全局組件案例
<body> <div id="app"> <my-component></my-component> </div> <script src="lib/vue-2.4.0.js"></script> <script> //全局組件 Vue.component('myComponent',{ //1.組件的內(nèi)容/模板 template: '<div><div>頭部組件</div><h2 @click="fn">呵呵{{msg}}</h2></div>', data(){ return { msg:'hello,組件' } }, methods:{ fn(){ console.log(this.msg); } } }) let vm = new Vue({ el:"#app", data:{ }, methods:{ }, }) </script> </body>
局部組件案例
<body> <div id="app"> <my-component></my-component> <my-test></my-test> </div> <template id="box1"> <h2>haha</h2> </template> <template id="box2"> <div> <ul> <li v-for="item in arr"> {{ item }} </li> </ul> </div> </template> <script src="lib/vue-2.4.0.js"></script> <script> let vm = new Vue({ el:"#app", data:{ }, methods:{ }, //局部子組件 components:{ // 組件名: {配置項(xiàng)} "myComponent":{ template:'#box1', data(){ return { msg:"哈哈" } } }, "myTest":{ template:"#box2", data(){ return { arr:[1,2,3,4] } } } } }) </script> </body>
組件切換:法一
<body> <div id="app"> <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" flag=true">登錄</a> <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" flag=false">注冊(cè)</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <script src="lib/vue-2.4.0.js"></script> <script> Vue.component("login",{ template:"<h2>登錄組件</h2>" }) Vue.component("register",{ template:"<h2>注冊(cè)組件</h2>" }) let vm = new Vue({ el:"#app", data:{ flag: false }, methods:{ }, }) </script> </body>
組件切換:法二
<style> .red{ color:red; } .v-enter{ opacity:0; transform: translateX(150px); } .v-leave-to{ opacity:0; transform: translateX(-150px); } .v-enter-active, .v-leave-active{ transition: all 0.5s; position: absolute; } </style>
<body> <div id="app"> <a href="" :class=" rel="external nofollow" rel="external nofollow" {red: flag=='login'}" @click.prevent="flag='login'">登錄</a> <a href="" :class=" rel="external nofollow" rel="external nofollow" {red: flag=='register'}" @click.prevent="flag='register'">注冊(cè)</a> <!-- vue提供了一個(gè)標(biāo)簽 component標(biāo)簽(理解為一個(gè)占位符), 用來(lái)展示對(duì)應(yīng)名稱的組件 :is屬性設(shè)置指定的組件名 --> <transition> <component :is="flag"></component> </transition> </div> <script src="lib/vue-2.4.0.js"></script> <script> Vue.component("login",{ template:"<h2>登錄組件</h2>" }) Vue.component("register",{ template:"<h2>注冊(cè)組件</h2>" }) let vm = new Vue({ el:"#app", data:{ flag: "login" }, methods:{ }, }) </script> </body>
父組件向子組件傳值
<body> <div id="app"> <my-component :fromfather="father"></my-component> </div> <template id="box1"> <h2 @click="change"> {{ fromfather }} 子組件的數(shù)據(jù) </h2> </template> <template id="grandSon"> <h2>孫子組件的數(shù)據(jù)</h2> </template> <!--1.子組件不能訪問(wèn)父組件的數(shù)據(jù) 2. 解決辦法: ①在引用子組件時(shí), 通過(guò)屬性綁定 v-bind方法, 把需要傳遞給子組件的數(shù)據(jù)以綁定的形式傳過(guò)來(lái) ② 在子組件配置項(xiàng)里添加 props: ['傳遞過(guò)來(lái)的數(shù)據(jù)']--> <script src="lib/vue-2.4.0.js"></script> <script> let vm = new Vue({ el:"#app", data:{ father:'啊~~這是父組件的數(shù)據(jù)' }, methods:{ }, //局部子組件 components:{ // 組件名: {配置項(xiàng)} "myComponent":{ template:'#box1', data(){ return { msg:"哈哈" } }, //在子組件配置項(xiàng)里添加 props: ['傳遞過(guò)來(lái)的數(shù)據(jù)'] //注意: 組件中所有的props中的數(shù)據(jù), 都是通過(guò)父組件傳遞給子組件的, props中的數(shù)據(jù)是只讀, 無(wú)法修改 props:['fromfather'], methods:{ change(){ // this.fromfather = "被修改了" } }, //局部子子組件 components:{ 'grandSon':{ template:'#grandSon' } } } } }) </script> </body>
上述內(nèi)容就是Vue 中怎么實(shí)現(xiàn)全局變量和局部變量,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章:Vue中怎么實(shí)現(xiàn)全局變量和局部變量-創(chuàng)新互聯(lián)
瀏覽路徑:http://muchs.cn/article34/eijpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容