父组件向子组件传值/子组件向父组件传值（结合自定义组件）

父组件

<template>
  <div>
                    msg是父组件传给子组件的          ddddddd 是子组件通过$emit 传过来的第一个参数
        <my-button  msg="你好"    @ddddddd="d"></my-button>
  </div>
</template>

<script>
import  anniu   from   "@/components/Button.vue"

export default {
  components: {
       "my-button" : anniu
  },
  data() {
    return {
      
    };
  },
  mounted() {
    
  },

  methods: {
    //  n 是用来接收子组件通过$emit 传过来的第二个参数
    d(n){
        alert(n)
    }
  },
};
</script>

<style   scoped>

</style>

<template>
  <div>
                             msg是父组件传过来的属性值，显示的是msg的key值
     <button @click="add"> {{msg}} </button>
  </div>
</template>

<script>
export default {
  // props 用来接收 父组件 传过来的 msg 属性
  // 下面设置 msg 设置他的属性类型之类的，默认值及其他数据 具体可看props API 
  props: {
      msg:{
        type : String,
        default:"按钮",// 当父组件没有设置这个msg 属性的时候会默认出现 按钮
        required:true, // 必填项，父组件必须设置这个msg 值否则会报错
      }
  },
  data() {
    return {
      
    };
  },
  mounted() {

  },
  //  子组件是通过$emit 属性 将下面第一个参数传到 父组件上面的属性，第二个参数是传给父组件的触发属性后的参数
  methods: {
          add(){
          this.$emit('ddddddd', 123);
      }
  },
};
</script>

<style   scoped>

</style>

小结

props 和$emit 都是写在子组件里的