十八、Component 父子组件关系

清疚 2022-05-03 08:00 181阅读 0赞

#                        Component 父子组件关系 #

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>component-father</title>
    </head>
    <body>
        <h1>component-father</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>`,
                //加入一个city组件
                components:{
                    "city":city
                }
            }
    
            //注册局部组件:只注册到一个vue实例
            var app=new Vue({
                el:'#app',
                components:{
                    "jspang":jspang
                }
            })
    
    
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 父子组件传值，非父子组件传值

一、子组件调用父组件，父组件给子组件传值引入Input header.component.ts import { Component, OnInit, In

深藏阁楼爱情的钟/ 2023年06月13日 04:46/ 0 赞/ 21 阅读

相关 Vue父子组件、子父组件、非父子组件通信

1、父子组件传值通信，在子组件中使用props属性，静态或者动态传递父组件的变量值 <template> <div id="app"> <

红太狼/ 2023年06月06日 03:51/ 0 赞/ 21 阅读

相关父子组件通信

子组件向父组件传递 this.$emit =>子组件向父组件传递事件并携带参数子组件：向父组件传递事件`toDetail`并传递参数`res` t

矫情吗；*/ 2023年02月10日 15:29/ 0 赞/ 198 阅读

相关 Angular入门到精通系列教程（8）- 父子组件（Component）之间传递数据

文章目录 1. 摘要 2. 父传子 @Input() 2.1. 子组件定义@Input() 2.2. 父组件传递变量给子组件

左手的ㄟ右手/ 2023年01月05日 12:29/ 0 赞/ 207 阅读

相关 Vue---父子组件通信+子父组件通信+非父子组件通信

父-子组件通信-props 父组件到子组件通信，通过props。子组件在props中定义要传的值，props有两种形式，一种是字符串数组形式，一种是对象形式。前者方

柔情只为你懂/ 2022年11月30日 04:13/ 0 赞/ 333 阅读

相关 Vuejs——（10）组件——父子组件通信

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u7236\_u5B50\_u7EC4\_u4EF6\_u9

不念不忘少年蓝@/ 2022年07月18日 04:12/ 0 赞/ 366 阅读

相关 Vuejs——（10）组件——父子组件通信

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u7236\_u5B50\_u7EC4\_u4EF6\_u901A

￡神魔★判官ぃ/ 2022年07月12日 08:26/ 0 赞/ 365 阅读

相关十八、Component 父子组件关系

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

清疚/ 2022年05月03日 08:00/ 0 赞/ 182 阅读

相关十六、Component 初识组件

Component 初识组件 component组件是Vue学习的重点、重点、重点，重要的事情说三遍。所以你必须

╰+哭是因爲堅強的太久メ/ 2022年05月03日 07:56/ 0 赞/ 207 阅读

相关 vue学习（十一）父子组件间传值

1，示例代码 <table> <tbody> <tr> <td> <pre><!DOCTYPE html> <html lang="en"

淡淡的烟草味﹌/ 2022年04月22日 12:12/ 0 赞/ 246 阅读