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>


目录
相关文章
|
6月前
|
JavaScript
在Vue中,父组件和子组件之间是如何通信的?
在Vue中,父组件和子组件之间是如何通信的?
43 3
|
6月前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
86 0
|
2月前
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
117 0
Element table组件封装 核心:父子组件传值、传方法
|
2月前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
2月前
|
存储 前端开发 JavaScript
React非父子组件之间的事件传递
本文介绍了在React中非父子组件之间如何通过事件总线(eventBus)实现事件传递。
28 0
|
4月前
|
JavaScript
数据共享方式,父组件向子组件共享数据,子向父,兄弟,Vuex
数据共享方式,父组件向子组件共享数据,子向父,兄弟,Vuex
|
5月前
|
设计模式 前端开发 JavaScript
约束性组件( controlled component)与非约束性组件( uncontrolled component)
约束性组件( controlled component)与非约束性组件( uncontrolled component)
|
6月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
78 0
|
6月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
76 0
|
6月前
|
存储 JavaScript 前端开发
父子组件通信:有效地在Vue组件树中传递数据
【4月更文挑战第24天】Vue.js中的组件通信是实现可维护和可扩展代码的关键。遵循单向数据流原则,数据从父组件通过`props`传给子组件,子组件通过`$emit`触发事件响应。常用通信方式包括:1) `Props`和`Events`基础通信;2) `Provide / Inject`跨级通信;3) 使用Vuex管理复杂状态;4) 共享祖先组件或Vuex处理非父子组件通信;5) 少量使用`ref`和`$parent / $children`直接访问。选择合适的方式能优化应用性能和用户体验。
65 0