vue父子组件传输

props/$emit

props:父组件向子组件传输，$emit:子组件向父组件传输

• props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
• props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。

父组件：practice.vue

<template>
   <div>
    <ul>
      <li v-for="framework in sortedFrameworks" :class="framework.language">
        <!-- 动态渲染li列表，通过v-for="  in  "结构 获取 各个列表 -->
        <!-- 动态获取class名，:class="framework.language" -->
        {
  { framework.name }}
      </li>
    </ul>
    <practice-add
      :frameworks="frameworks"
      :languages="languages"
      @framework-added="addFramework"
    ></practice-add>
    <!-- 父组件在调用子组件时，定义:frameworks="frameworks" :languages="languages" 这样的代码，通过这个的代码可以将属性数据传递子组件；
    而子组件通过 props 声明：props: ['frameworks', 'languages'], 用来接收父组件传递过来的属性数据 -->
   </div>
</template>

<script>
import practiceAdd from "./components/practiceAdd";
export default {
     
  name: "practice",
  components: {
      practiceAdd },
  data() {
     
    return {
     
      frameworks: [
        {
      name: "Mate30Pro", language: "huawei" },
        {
      name: "xiaomi11", language: "xiaomi" },
        {
      name: "oppo reno5", language: "oppo" },
        {
      name: "X60", language: "vivo" },