子组件与父组件的各种传递关系
一直搞不懂这些问题 现在准备来总结一下 这里我用的是脚手架，
1.首先梳理一下子组件使用父组件里面的数据，这里我们讲props方法【注意props中的数据只读】
首先是父组件，
home.vue
里面有数据
data() {
return {
banners: [],
recommends: [],
}
}
然后在子组件HomeSwiper.vue里面想要获取 recommends这个值，首先在父组件中，我们先要引入这个子组件
<recommend-view :recommends="recommends" />并定义一个值动态获取父组件中的 recommends值，然后在子组件中便可通过props使用这个值
props: {
banners: {
type: Array,
default(){
return []
}
}
},
Vue组件还可以通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据
子组件
TabControl.vue
props: {
titles: {
type: Array,
default() {
return []
}
}
},
父组件
Home.vue中
<tab-control class="tab-control" :titles="['流行','新款','精选']" @tabClick="tabClick" />这里动态传了一对数组
2.然后就是父组件使用子组件里面的值，子传父，使用emit，
首先子组件
TabControl.vue中，
methods:{
itemClick(index){
this.currentIndex = index;
this.$emit('tabClick',index)
}
}
要把这个index传给父组件Home.vue中
在父组件中
<tab-control class="tab-control" :titles="['流行','新款','精选']" @tabClick="tabClick" />通过自定义事件，
tabClick(index) {
switch (index) {
case 0:
this.currentType = 'pop'
break
case 1:
this.currentType = 'new'
break
case 2:
this.currentType = 'sell'
break
}
},拿到数据
3.父组件将方法传递给子组件，通过事件绑定机制，
首先在父组件中 定义一个方法
methods: {
show(data) {
console.log('调用了父组件身上的 show 方法: --- ' + data)
}
},
然后事件绑定机制拿到在这个方法
这个ref还能拿到子组件中的值
<com2 @func="show"></com2>
在子组件里，
<input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
methods: {
myclick() {
this.$emit('func')
}
}
这个跟子传父值有点像
4.父组件调用子组件的方法
子组件
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log("调用到了")
}
}
}
</script>父组件
<template>
<div id="app">
<HelloWorld ref="hello"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
this.$refs.hello.open();
}
}
