vue 父传子 props

在Vue中，父组件可以使用props将数据传递给子组件。子组件通过props属性来接收父组件传递的数据。父组件在使用子组件时，通过属性传递的数据不会出现在网页的标签属性上。无论父组件的数据发生变化，子组件也会随之发生变化。也就是说，当父组件给子组件传递的属性数组发生改变时，子组件内使用该属性的地方都会发生更新，这就是props的响应式。示例代码如下：

<div id="app">
  <father-com></father-com>
</div>

<template id="son">
  <div>我总共被点击了{{ num }}次</div>
</template>

<template id="father">
  <div>
    <son-com :num="num"></son-com>
    <button @click="add">点击 +1</button>
  </div>
</template>

<script>
  let SonCom = {
    props: ["num"],
    template: "#son",
  };

  let FatherCom = {
    template: "#father",
    data() {
      return {
        num: 0,
      };
    },
    components: {
      SonCom,
    },
    methods: {
      add() {
        this.num++;
      },
    },
  };

  let vm = new Vue({
    el: "#app",
    components: {
      FatherCom,
    },
  });
</script>

在这个例子中，父组件FatherCom通过属性`:num="num"`将数据num传递给了子组件SonCom。子组件SonCom通过props属性接收父组件传递的数据，并在模板中使用`{{ num }}`进行显示。当点击按钮时，父组件的方法add会增加num的值，从而更新子组件的显示。