vue 父传子

---

前言

父传子通过 属性绑定：

---

代码如下（示例）：

css部分

<div id="app">
  <!-- 父传子通过 属性绑定-->
  <!-- 父组件-->
  <!-- 静态值 -->
  <!-- <com1 title="父传子值"></com1> -->
  <!-- 动态值 -->
  <com1 :title="parent_to_son"></com1>
</div>

js部分

$(function () {
  const app = Vue.createApp({
    data() {
      return {
        parent_to_son: "父传子值",
      };
    },
  });
  //子组件（类似于全局变量，可以设置多个）
  app.component("com1", {
    //子组件自己值
    data() {
      return {};
    },
    //子组件声明props
    props: ["title"],
    template: `<h1>这是子组件:{{title}}</h1>`,
  });
  const vm = app.mount("#app");
});