溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Vue 中怎么實現(xiàn)全局變量和局部變量，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
局組件和局部組件
1.先定義組件 Vue.component('組件名', { 組件模板對象 })
注意: 組件名不要使用原生的標(biāo)簽名, 若組件名定義時用的是駝峰命名法, 則調(diào)用時用中劃線分割后小寫
例如: 組件-->mtText 使用時--> <my-text></my-text>
2.配置組件的模板 注意: 組件的模板內(nèi)容有且只有一個根元素
3.在視圖層里調(diào)用 ,用雙標(biāo)簽
4.組件是一個獨立的作用域, 也可以看成一個特殊的vue實例, 可以有data, methods,computed等等
注意: 組件的data是函數(shù), 函數(shù)中需要返回一個對象作為組件的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:{
// 組件名: {配置項}
"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">注冊</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>注冊組件</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'">注冊</a>
<!-- vue提供了一個標(biāo)簽 component標(biāo)簽(理解為一個占位符), 用來展示對應(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>注冊組件</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.子組件不能訪問父組件的數(shù)據(jù)
2. 解決辦法: ①在引用子組件時, 通過屬性綁定 v-bind方法, 把需要傳遞給子組件的數(shù)據(jù)以綁定的形式傳過來
② 在子組件配置項里添加 props: ['傳遞過來的數(shù)據(jù)']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
father:'啊~~這是父組件的數(shù)據(jù)'
},
methods:{
},
//局部子組件
components:{
// 組件名: {配置項}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
},
//在子組件配置項里添加 props: ['傳遞過來的數(shù)據(jù)']
//注意: 組件中所有的props中的數(shù)據(jù), 都是通過父組件傳遞給子組件的, props中的數(shù)據(jù)是只讀, 無法修改
props:['fromfather'],
methods:{
change(){
// this.fromfather = "被修改了"
}
},
//局部子子組件
components:{
'grandSon':{
template:'#grandSon'
}
}
}
}
})
</script>
</body>上述內(nèi)容就是Vue 中怎么實現(xiàn)全局變量和局部變量，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼