组件传值父向子传值：props和$emit

首先我们先看props方法传值在父组件中把数据定义好

<template>
    <div class="home">
        <HelloWorld :Fnadd="fnTxt" :txtlist="txtlist" txt="我是标题"/>
    </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
    name: "Home",
    components: {
        HelloWorld,
    },
    data() {
        return {
            txtlist: [
                { id: "v1", title: "大哥" },
                { id: "v2", title: "二哥" },
            ],
        };
    },
    methods:{
      fnTxt(val){
        console.log("这里是父级传递的方法"+val)
      }
    }
};
</script>

接着就是子组件中用，代码如下：

<template>
  <div class="hello">
    <div>这里是父级传递过来的数据：{{txt}}</div>
    <div>这里是父级传递过来的数组：{{txtlist}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    txt:String,
    txtlist:Array,
    Fnadd:Function
  },
  created(){
    this.Fnadd(12)
  }
}
</script>

然后就是我们的$emit方法

父组件中：

<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        <HelloWorld @toParent="getSon" />
    </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
    name: "Home",
    components: {
        HelloWorld,
    },
    methods: {
        getSon(e) {
            console.log("接收到了子级的数据", e);
        },
    },
};
</script>

子组件中

<template>
    <div class="hello">
        <button @click="fnby">子传值</button>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
        msg: String,
    },
    methods: {
        fnby() {
            this.$emit("toParent", 66666);
        },
    },
};
</script>