首页 > 其他分享> > 父组件与子组件

父组件与子组件

2020-12-21 21:02:12 作者：互联网

父组件与子组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父组件与子组件</title>
</head>
<body>
<div id="app">
 <cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
  //1.创建第一个组件(子组件)
  const cpnC1 = Vue.extend({
    template:
    `<div>
        <h2>我是标题一</h2>
        <p>我是组件1</p>
     </div>`
  });
  //2.创建第二个组件(父组件)
  const cpnC2 = Vue.extend({
    template:
        `<div>
        <h2>我是标题二</h2>
        <p>我是组件2</p>
        <cpn1></cpn1>
     </div>`,
    //第二个组件内部注册第一个组件
    components: {
      cpn1: cpnC1,
    }
  });
  //可以将vue实例也看成一个组件，root组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn2:cpnC2,
    }
  });
</script>
</body>
</html>

在这里插入图片描述

局部注册有其作用域，组件一在组件二中注册，组件一就是子组件，组件二就是父组件，可以在组件二中使用组件一，组件二在vue实例中注册过，可以在vue实例中使用组件二，但是不能使用组件一，它没局部注册或全局注册。

标签：Vue,const,与子,vue,注册,组件
来源： https://blog.csdn.net/LIUCHUANQI12345/article/details/111499724