子组件与父组件的各种传递关系

一直搞不懂这些问题  现在准备来总结一下 这里我用的是脚手架，

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)
        }
      },

 然后事件绑定机制拿到在这个方法

<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();
    }
  }

这个ref还能拿到子组件中的值