vue父子组件

最新推荐文章于 2022-09-09 12:13:50 发布

前端-阿辉

最新推荐文章于 2022-09-09 12:13:50 发布

阅读量245

点赞数 1

分类专栏： Vuejs 文章标签： vue html

本文链接：https://blog.csdn.net/bigpatten/article/details/108274739

版权

Vuejs 专栏收录该内容

48 篇文章 4 订阅

订阅专栏

在这里插入图片描述

从调试工具中可以看出MyForm是MyButton的父组件，或者说id="app"是MyForm的父组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue父子组件</title>
  </head>
  <body>
    <div id="app">
      <my-form></my-form>
    </div>
  </body>
  <script src="../common/vue.js"></script>
  <script>
    Vue.component("my-button", {
      data() {
        return {
          css: { color: "red" },
        };
      },
      template: `<button>
        <span :style="css">这是一个自定义的组件</span>
      </button>`,
    });
    Vue.component("my-form", {
      data() {
        return {
          test: "测试一下",
        };
      },
      template: '<form><input type="text"><my-button></my-button></form>',
    });
    new Vue({
      el: "#app",
      data: {},
    });
  </script>
</html>