Component 父子组件关系

简介: Component 父子组件关系

在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件,这就需要一个父子组件关系。


一、构造器外部写局部注册组件



之前我们都把局部组件的编写放到了构造器内部,如果组件代码量很大,会影响构造器的可读性,造成拖拉和错误。


我们把组件编写的代码放到构造器外部或者说单独文件。

我们需要先声明一个对象,对象里就是组件的内容。

var jspang = {
   template:`<div>Panda from China!</div>`
}


声明好对象后在构造器里引用就可以了。

components:{
    "jspang":jspang
}


html中引用

<jspang></jspang>


二、父子组件的嵌套



我们先声明一个父组件,比如叫jspang,然后里边我们加入一个city组件,我们来看这样的代码如何写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-3</title>
</head>
<body>
    <h1>component-3</h1>
    <hr>
    <div id="app">
      <jspang></jspang>  
    </div>
    <script type="text/javascript">
       var city={
           template:`<div>Sichuan of China</div>`
       }
        var jspang = {
            template:`<div>
                        <p> Panda from China!</p>
                        <city></city>
                      </div>`,
            components:{
                "city":city
            }
        }
        var app=new Vue({
            el:'#app',
            components:{
                "jspang":jspang
            }
        })
    </script>
</body>
</html>


目录
相关文章
|
9月前
|
JavaScript
在Vue中,父组件和子组件之间是如何通信的?
在Vue中,父组件和子组件之间是如何通信的?
51 3
|
9月前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
104 0
|
前端开发
VUE3.0 在父子组件中相互触发组件的函数方法
VUE3.0 在父子组件中相互触发组件的函数方法
402 0
|
7月前
|
前端开发
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
256 2
|
5月前
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
200 0
Element table组件封装 核心:父子组件传值、传方法
|
5月前
|
存储 前端开发 JavaScript
React非父子组件之间的事件传递
本文介绍了在React中非父子组件之间如何通过事件总线(eventBus)实现事件传递。
44 0
|
8月前
|
设计模式 前端开发 JavaScript
约束性组件( controlled component)与非约束性组件( uncontrolled component)
约束性组件( controlled component)与非约束性组件( uncontrolled component)
|
9月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
9月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
105 0
|
9月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
134 0

热门文章

最新文章