Vue父子，子父，非父子组件之间传值
程序员文章站
2022-07-09 21:20:05
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>