父子组件传值

1.父组件向子组件传值

在 Vue 中，可以使用 props 向子组件传递数据。
父组件通过：绑定元素

     <demo-grid
      :heroes="gridData"
      :columns="gridColumns"
      :filter-key="searchQuery"
    >
    </demo-grid>

子组件

<script>
export default {
  props: {
    heroes: "",
    columns: "",
    filterKey: "",
  },

在props里定义的数据，在data里不需要再次定义了
总结：子组件在props中创建一个属性，用来接收父组件传来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

2.子组件向父组件传值

子组件主要通过事件传递数据给父组件
1.在子组件里绑定一个事件

@click="sortBy(key)"

2.在子组件里定义方法
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

methods: {
    sortBy(key) {
      this.$emit("listenToChildEvent","this message is from child")
    },
  },

3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

父组件
@listenToChildEvent="showMsgFromChild"//绑定对自定义事件的监听


methods:{
    showMsgFromChild(data){
      console.log(data)
    }
  },