如何使用vue定义组件之——父组件调用子组件

首先,我们需要创建两个组件模板template:

javascript 复制代码
    <template id="father">
        <div>
            <h3>我是父组件</h3>
            <h3>访问自己的数据:</h3>
            <h3>{{ msg }}</h3>
        </div>
    </template>

    <template id="children">
        <div>
            <h5>我是子组件</h5>
            <h5>访问自己的数据:{{ sex }}</h5>
        </div>
    </template>

创建父子关系,使用vue将子组件添加到父组件里面,并且添加一些数据以便展示:

javascript 复制代码
 new Vue({
        el: '.container',
        components: {
            'my-father': {//父组件
                template: '#father',
                data() {
                    return {
                        msg: "welcome father!",
                        name: "I'm a father!",
                        age: 66,
                        user: {
                            id: 1001,
                            username: 'admin'
                        },
                        sex: null
                    }
                },
                components: {
                    'my-children': { //子组件,只能在 my-father中调该组件
                        template: '#children',
                        data() {
                            return {
                                sex: 'male'
                            }
                        }
                    }
                }
            }
        }
    })

现在,可以调用父组件了:

javascript 复制代码
    <div class="container">
        <my-father></my-father>
        <my-father></my-father>
        <my-father>
            <!-- 此处也不能访问到子组件的数据,必须在父组件的template中引用子组件 -->
            <!-- <my-children></my-children> -->
        </my-father>
        
        <!-- 此处无法调用子组件,子组件必须依赖于父组件进行展示 -->
        <!-- <my-children></my-children> -->
    </div>

问题来了,那么如何调用子组件呢?

javascript 复制代码
    <template id="father">
        <div>
            <h3>我是父组件</h3>
            <h3>访问自己的数据:</h3>
            <h3>{{ msg }}</h3>
            <my-children></my-children><hr>
        </div>
    </template>

展示结果:

相关文章:

如何使用vue定义组件之------全局or局部

如何使用vue定义组件之------子组件调用父组件数据

如何使用vue定义组件之------父组件调用子组件数据

相关推荐
烛阴几秒前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
去伪存真1 分钟前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
sen_shan15 分钟前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
s91236010117 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim36 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码40 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言1 小时前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K1 小时前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_1 小时前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构