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>

子组件调用父组件的事件

 如果父传子有很多值,那么在子组件需要定义多个props解决:attrs获取子传父中未在 props 定义的值

listeners场景:子组件需要调用父组件的方法解决:父组件的方法可以通过v−on="listeners" 传入内部组件——在创建更高层次的组件时非常有用

子组件调用父组件的方法2

 parent:父实例children:子实例

//父组件
mounted(){
  console.log(this.$children) 
  //可以拿到 一级子组件的属性和方法
  //所以就可以直接改变 data,或者调用 methods 方法
}

//子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

children和parent 并不保证顺序，也不是响应式的 只能拿到一级父组件和子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

$refs

// 父组件
<home ref="home"/>

mounted(){
  console.log(this.$refs.home) //即可拿到子组件的实例,就可以直接操作 data 和 methods
}

 $root

// 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

 .sync

父传子: 用属性props 向下传递 ;  
字传父: 利用事件向上传递 ,父组件监听这个事件

子->父 父需要监听cry这个事件 然后用f2(data){ } data就是传递的参数