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

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

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>

1、父传子

父组件自定义个title属性，绑定要传递的值，子组件通过一个props实例把父组件传递的值获取就可以渲染了。

<template>
  <div>
      <p>父组件</p>
      <con :title="hello"/>
  </div>
</template>

<script>
import con from '../components/componts.vue'
export default {
    name:'login',
    data(){
        return{
            hello:"你的父亲组件"
        }
    },
    components:{
        con
    }
}
</script>

子组件

<template>
  <div class="hello">
      {{title}}
  </div>
</template>

<script>
export default {
  name: 'Compont',
  data(){
      return{}
  },
  props:{
      title:String
  }
}
</script>

注：子组件接受父组件传递过来的是可以定义变量的类型，不是符合类型就不接收

2、子传父

子组件通过点击事件，在点击事件里面自定义个事件
this.$emit(“getdata”,this.test)然后传递给父组件，
父组件接受这个子组件自定义的事件，这个事件有个里面的返回值就是传递过来的数据
<con @getdata=“getdata”/>
子组件

<template>
  <div class="hello">
      <button @click="opee">子传父</button>
  </div>
</template>

<script>
export default {
  name: 'Compont',
  data(){
      return{
        test:"我是儿孩子组件"
      }
  },
  methods:{
      opee:function(){
          this.$emit("getdata",this.test)
      }
  },
}
</script>

父组件

<template>
  <div>
      <p>父组件</p>
      {{msg}}
      <con @getdata="getdata"/>
  </div>
</template>

<script>
import con from '../components/componts.vue'
export default {
    name:'login',
    data(){
        return{ 
            msg:"父组件本来的值"
        }
    },
    methods:{
        getdata(e){
            this.msg=e
            console,log(e)
        }
    },
    components:{
        con
    }
}
</script>