【Vue】Props传递数据(父传子) & 自定义事件(子传父)

一、定义一个父组件和一个子组件(子组件嵌套在父组件中)

App.vue 中

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- 使用组件 -->
    <Parent></Parent>
  </div>
</template>

<script>
//1、引入组件

import Parent from "./components/Parent.vue";
export default {
  name: "App",
  components: {
    //2、注册组件
    Parent,
  },
};
</script>

父组件Parent.vue

<template>
<div>
  <h1>父组件</h1>
  <Son></Son>
</div>

</template>

<script>
import Son from "./Son.vue";
export default {
    components:{
        Son,
    },
}
</script>

<style>

</style>

子组件

<template>
  <div>
    <h1>Son组件</h1>
  </div>
</template>

<script>
export default {

};
</script>

<style>
</style>

二、Props传递数据(父传子)

1、使用Props数组方式传值

父组件：
msg1静态传值，msg2动态传值

<template>
<div>
  <h1>父组件</h1>
  <p>msg2:{{info}}</p>
   <button @click="changeMsg2">改变msg2</button>
  <Son msg1='Hello World' :msg2='info'></Son>
</div>

</template>

<script>
import Son from "./Son.vue";
export default {
    components:{
        Son,
    },
    data(){
        return{
            info:'Good Morning'
        }
    },
    methods:{
        changeMsg2(){
            this.info='Good Afternoon';
        }
    }
}
</script>

<style>

</style>

子组件

<template>
  <div>
    <h1>Son组件</h1>
    <p>msg1:{{msg1}}</p>
    <p>msg2:{{msg2}}</p>
  </div>
</template>

<script>
export default {
    props:['msg1','msg2'],
};
</script>

<style>
</style>

点击按钮后即动态改变数据：

2、对象方式传值

父组件

<template>
<div>
  <h1>父组件</h1>
  <p>msg2:{{info}}</p>
   <button @click="changeMsg2">改变msg2</button>
  <Son msg1='Hello World' :msg2='info' :msg4="info4"></Son>
</div>

</template>

<script>
import Son from "./Son.vue";
export default {
    components:{
        Son,
    },
    data(){
        return{
            info:'Good Morning',
            info4:"Wo!"
        }
    },
    methods:{
        changeMsg2(){
            this.info='Good Afternoon';
            
        }
    }
}
</script>

<style>

</style>

子组件：

<template>
  <div>
    <h1>Son组件</h1>
    <p>msg1:{{ msg1 }}</p>
    <p>msg2:{{ msg2 }}</p>
    <p>msg3:{{ msg3 }}</p>
    <p>msg4:{{ msg4 }}</p>
    <p>msg5:{{ msg5.message }}</p>
    <p>msg6:{{ msg6[0] }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg1: String,
    // 多个可能的类型
    msg2: [String, Number],
    msg3: {
      //带有默认值
      type: String,
      default: "Good Night",
    },
    msg4: {
      //必填的字符串  不填会报错
      type: String,
      required: true,
    },
    // 带有默认值的对象
    msg5: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: "hello" };
      }
      },
      // 带有默认值的数组
      msg6: {
        type: Array,
        // 对象或数组的默认值必须从一个工厂函数返回
        default() {
          return ["M", "A", "E"];
        },
      },
    },
  };
</script>

<style>
</style>

三、自定义事件(子传父)

语法：
子组件定义事件
this.$emit(自定义事件名,参数..)
父组件调用子组件上面接受自定义事件
<子组件 @自定义事件名=‘函数名’ ></子组件>

methods:{
	函数名(参数...){
		------
	}
}

父组件

<template>
<div>
  <h1>父组件</h1>
  <p>info1:{{info1}}</p>
  <Son :info='info1' @getData='getData'></Son>
</div>

</template>

<script>
import Son from "./Son.vue";
export default {
    components:{
        Son,
    },
    data(){
        return {
            info1:"mae"
        }
    },
    methods:{
        getData(val){
            this.info1=val;
        }
    }
}
</script>

<style>

</style>

子组件

<template>
  <div>
    <h1>Son组件</h1>
    <p>父组件数据info：{{msg}}</p>
    <button @click="sendData">子向父传数据</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"HelloWorld"
        }
    },
    methods:{
        sendData(){
            //抛出自定义函数
            this.$emit('getData',this.msg);
        }
    }
  };
</script>

<style>
</style>

点击按钮 子向父传数据