vue父传子，子传父

父传子 props

子组件部分

//html部分
<template>
  <div class="hello">
    <div>1111111111{{title}}</div>  //这样title接受的就是父组件的数据了
  </div>
</template>
//js部分
export default {
  name: "HelloWorld",
  props:{  //props用来接收，一定是放在data()的外面，不要放在data()里面。
    title:{  //title一定是在父组件绑定的值。父组件绑定什么，子组件接收的这就写什么
      type:String,   // type:是接受过来的类型。一定要是什么类型在子组件里定义
      default:"你好"  // default:设置默认值。在从父组件没有传过来之前定义一个默认值
    }
     //还有一种情况是父组件也没有传值，子组件这需要设置为空的情况下
     //         title:{ 
    //            type:String,  
    //            default: ()=>{
     //              return null   //没有return会报错，而null 需求而定 也可以空数组等[]
      //          }
   //           }
  },
  data(){
    return{
    }
  },
  methods:{
  },

};

父组件部分

//html部分
<template>
  <div class="home">
    <HelloWorld  :title="names"  />   //‘:’代表v-bind,绑定的title随便写。names是你data里的值
  </div>
</template>
//js部分
import HelloWorld from "@/components/HelloWorld.vue";  //引用子组件

export default {
  name: "Home",
  components: {
    HelloWorld  //注册一下
  },
  data(){
    return{
      names:"我是父组件1", //想要给子组件传的内容
    }
 
  },
  methods:{
    }
};

思考学习顺序，其实是先有子组件才能在父组件引用。
但是 目前实现的父传子 props。所以当创建了空的子组件之后 从父组件 那开始屡思路还好理解些。

子传父 emit
子组件部分

//html部分
<template>
  <div class="hello" @click="nihao">
  </div>
</template>
//js部分
export default {
  name: "HelloWorld",
  data(){
    return{
       data:"我是子组件"
    }
  },
  methods:{
    nihao(){
      this.$emit('clcicks',this.data)  // clcicks实在父组件用到的点击事件  this.data是要传的数据
    }
  },

};

父组件部分

//html部分
<template>
  <div class="home">
    <HelloWorld  @clcicks="nihaoaa"  />   //clcicks   一定是子组件方法里定义的值是一样的，
  </div>
</template>
//js部分
import HelloWorld from "@/components/HelloWorld.vue";  //引用子组件

export default {
  name: "Home",
  components: {
    HelloWorld  //注册一下
  },
  data(){
    return{
    }
 
  },
  methods:{
  nihaoaa（item）{
     console.log(item) //我是子组件
  }
    }
};

这就是字传父的方法了

希望你 学习有成，月入过万。追你的人，地球绕三圈。