vue传值（父传子）和（子传父）

目录

1、父传子

2、子传父

①自定义事件--$emit

 ②sync

③v-model

---

1、父传子

props让组件接收外部传过来的数据
传递数据<Demo name="xxx" :age="18"/〉这里age前加∶通过v-bind使得里面的18是数字接收数据
第—种方式(只接收)props : [ 'name ' , "age ']
第二种方式(限制类型)props :{name : String，age :Number}；

第三种方式(限制类型、限制必要性、指定默认值)
备注: props是只读的，Vue底层会监测你对props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据

2、子传父

①自定义事件--$emit

 App父组件

<template>
  <div id="root">
    <h1>{{ title }}----{{ ageFormSon }}</h1>
    <Left @agechange="getNewCount"></Left>
  </div>
</template>

<script>
import Left from "./components/Left";

export default {
  name: "App",
  data() {
    return {
      title: "这是父组件",
      ageFormSon: 0,
    };
  },
  components: {
    Left,
  },
  methods: {
    // 获取子组件传递过来的事件
    getNewCount(val) {
      console.log("事件触发了", val);
      this.ageFormSon = val;
    },
  },
};
</script>

Left子组件

<template>
  <div>
    <h1>{{ name }}</h1>
    <h2>{{ age }}</h2>
    <button @click="add">+1</button>
  </div>
</template>

<script>
import Left from "./Left";
export default {
  name: "MyList",
  components: { Left },
  data() {
    return {
      name: "刘",
      age: 18,
    };
  },
  methods: {
    add() {
      this.age += 1;
      // 把自增的结果，传给父级
      this.$emit("agechange", this.age); //只要age+1就会触发$emit
      //  agechange这里的名字要和父组件中自定义事件里的一致
    },
  },
};
</script>

效果：点击+1时父与子组件数字都会改变

 ②sync

和第一种相比，methods中可以不写方法（省略了绑事件），更简单，sync相当于帮我更新a1的值

APP父组件：

相当于语法糖：绑了个事件来修改，并且msg由a1的值来决定的

效果如图：

子组件中：updata为固定写法，代码中的意思为更新a1中的数据

③v-model

 子组件中没加$emit时：

 最终效果图：