十八、Component 父子组件关系

清疚 2022-05-03 08:00 146阅读 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 条评论，146人围观）

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

相关阅读

相关父子组件通信

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

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

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

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

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

相关 vue父子组件交互

vue开发过程中父子组件通信是很常见的一个问题，现将vue官网上的这部分记录在册，方便后面查询，官网的这部分内容说的很清楚了。 --------------------

末蓝、/ 2022年12月22日 09:42/ 0 赞/ 128 阅读

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

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

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

相关 vue-自主研发非父子关系组件之间通信的问题

相信很多人都知道解决组件间通信：vuex，今天的主角不是它。 element-ui里解决组件间通信的思路：emitter.js ，但是如果你拿来你会发现它解决的是父子组件之间

秒速五厘米/ 2022年10月02日 14:45/ 0 赞/ 62 阅读

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

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

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

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

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

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

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

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

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

相关十六、Component 初识组件

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

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

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

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

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