Vue組件基礎 純屬隨筆記錄，具體詳細教程，請查閱vue.js網站 子組件給父組件傳值: 父組件給子組件傳值: 非父子組件間傳值： ` ...
Vue組件基礎
純屬隨筆記錄，具體詳細教程，請查閱vue.js網站
子組件給父組件傳值:
<body>
<div id="app">
<my-app></my-app>
</div>
</body>
<template id="appTem">
<div>我是---{{ msg }}
<my-banner @lalala='getData'></my-banner>
</div>
</template>
<template id="bannerTem">
<div>我是---
<button @click='setData'>這裡是輪播圖banner</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定義一個組件
const Banner = {
template: '#bannerTem',
methods: {
setData() {
this.$emit('lalala', '我是子組件my-banne的值')
}
},
}
//定義一個組件
const App = {
template: '#appTem', //提取組件中的模板
data() { //組件的data是一個函數，返回的是一個對象
return {
msg: '頭部組件',
a: 212
}
},
components: {
'my-banner': Banner,
},
methods: {
getData(str) {
console.log(str);
}
}
}
const app = new Vue({
el: '#app',
// data:{
// },
components: {
'my-app': App
}
})
</script>父組件給子組件傳值:
<body>
<div id="app">
<my-heade></my-heade>
</div>
</body>
<template id="headeTm">
<div>
我是heade組件
<my-banner :bar='msg'></my-banner>
</div>
</template>
<template id="bannerTm">
<div>
我是banner組件
{{ bar }}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定義一個banner組件
const Banner = {
template: '#bannerTm',
props: {
bar: {
type: String
}
}
}
//定義一個heade組件
const Heade = {
template: '#headeTm',
components: {
'my-banner': Banner
},
data() {
return {
msg: '我是父組件的值'
}
}
}
const app = new Vue({
el: '#app',
components: {
'my-heade': Heade
}
})
</script>非父子組件間傳值：
<body>
<div id="app">
<my-app></my-app>
</div>
</body>
<template id="appTm">
<div>我是最外面的app
<my-banner></my-banner>
<my-bannerindex></my-bannerindex>
</div>
</template>
<template id="bannerTm">
<div>
這裡是banner
<button @click='getIndex(1)'>1</button>
<button @click='getIndex(2)'>2</button>
<button @click='getIndex(3)'>3</button>
<button @click='getIndex(4)'>4</button>
</div>
</template>
<template id="barindexTm">
<div>
{{ index }}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//中央事件匯流排，也就是實例化一個Vue
const bus=new Vue();
const BarIndex={
template:'#barindexTm',
data(){
return{
index:''
}
},
mounted() {
// 2、監聽事件
that=this;
bus.$on('changeIndex',function(index){//(index)=>{this.index=index}
// console.log(index);
that.index=index;
})
},
}
const Banner={
template:'#bannerTm',
methods: {
getIndex(value){
bus.$emit('changeIndex',value)
}
},
}
const App={
template:'#appTm',
components:{
'my-banner':Banner,
'my-bannerindex':BarIndex
}
}
const app =new Vue({
el:'#app',
components:{
'my-app':App
}
})
</script> 
