1.父传子

父组件里面获取的一些属性，子组件也想使用。

父组件在使用子组件是给调用的子组件设置字段并把要传的值赋值过去

<template>
  <div>
    <!-- 这里是父组件 -->
    <h1>这里是父组件</h1>
    <B :msg="msgs" :arr="items"></B>
  </div>
</template>

<script>
import B from './B.vue'
  export default {
  components: { B },
    data() {
      return {
        msgs:'父组件的内容被子组件调用',
        items:[
          {id:1,name:'语文'},
          {id:2,name:'数学'},
          {id:3,name:'生物'},
          {id:4,name:'化学'}
        ]
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

这里的子组件在data里面定义props来接受传过来的值

拿到的数据，可以直接遍历展示

<template>
  <div>
    <!-- 这里是子组件 -->
    <h1>这里是子组件</h1>
    <h3>{{msg}}</h3>
    <h3 v-for="item in arr" :key="item.id">
      {{item.id}},,,,{{item.name}}
    </h3>
  </div>
</template>

<script>
  export default {
    props:['msg',"arr"],
  }
</script>

<style lang="scss" scoped>

</style>

 2.子传父

子传父就是子组件的方法或者是一些数据父组件想要使用

先说数据如何传递。这里子组件要使用$emit来传递，并且传递过去的方法名字要跟调用子组件时用的方法名字一致 这里的是showname。

<template>
  <div>
   <!-- 这里是父组件 -->
   <h1>这里是父组件</h1>
   <h3>你叫什么？？</h3>
   <h3>{{this.name}}</h3>
   <!-- 引用子组件 -->
    <B @showname='showname'/>
  </div>
</template>

<script>
import B from './B.vue'
  export default {
  components: { B },
  data() {
    return {
      name:''
    }
  },
    methods: {
      showname(newval) {
        console.log(newval);
        this.name = newval
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    <!-- 这里是子组件 -->
    <h1>这里是子组件</h1>
    <button @click="go">点击传递</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '小明'
      }
    },
    methods: {
      go() {
        this.$emit('showname',this.name)
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

接下来就是方法，也就是在父组件使用子组件的方法

先在子组件里面定义一个方法 这里用到了vant组件库的Toast轻提示

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast

<template>
  <div>
    <!-- 这里是子组件 -->
    <h1>这里是子组件</h1>
  </div>
</template>

<script>
import { Toast } from 'vant';
  export default {
    data() {
      return {
      }
    },
    methods: {
      // 这里用了vant组件的Toast提示
      loading() {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
      },
    },
  }
</script>

<style lang="scss" scoped>

</style>

然后在父组件调用子组件的方法

注意ref定义的值要和下面方法里面$refs后面的一样

<template>
  <div>
   <!-- 这里是父组件 -->
   <h1>这里是父组件</h1>
   <!-- 点击调用子组件的loading方法 -->
   <button @click="showloading">父组件点击</button>
   <B ref="loading"/>
  </div>
</template>

<script>
import B from './B.vue'
  export default {
  components: { B },
    methods: {
      showloading(){
        this.$refs.loading.loading()
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>