Vue之父组件与子组件

偏执的太偏执、 2022-10-29 05:26 215阅读 0赞

![在这里插入图片描述][2021020822023477.jpg_pic_center]

`核心代码如下：`

<body>
    <div id="app">
        <cpn2></cpn2>
    </div>
    <script src="../Vue_js/vue.js"></script>
    <script>
        //创建子组件
        const cpnC1 = Vue.extend({ 
            template: '' +
                '<div>' +
                '<h2>我是子组件</h2>' +
                '<p>我是内容:hahahahaha</p>' +
                '</div>'
        })
        //创建父组件
        const cpnC2 = Vue.extend({ 
            template: '' +
                '<div>' +
                '<h2>我是父组件</h2>' +
                '<p>我是内容:哈哈哈哈</p>' +
                '<cpn1></cpn1>' +
                '</div>',
            components: { 
              cpn1: cpnC1
            },
        })
        const app = new Vue ({ 
            el: '#app',
            data: { 
                message: 'vue模板',
            },
            components: { 
              cpn2: cpnC2
            },
            methods: { 
    
            },
        })
    </script>
    </body>

[2021020822023477.jpg_pic_center]: /images/20221024/9f43935cf4444d128efe4e0c0d0b3ab9.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 313 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 275 阅读

相关 Vue之父组件与子组件

![在这里插入图片描述][2021020822023477.jpg_pic_center] `核心代码如下：` <body> <div id="app">

偏执的太偏执、/ 2022年10月29日 05:26/ 0 赞/ 216 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 303 阅读

相关 Vue父组件获取子组件数据

方法一、从父组件调用子组件方法获取数据 1、子组件addindex.vue写一个方法，返回要用的数据 methods: { // 父组件获取数据

以你之姓@/ 2022年04月24日 18:56/ 0 赞/ 950 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 587 阅读

相关 vue子组件调用父组件方法

说明：有一个组件InputListSelect.vue，选中一个行数据，将该数据传送到父级ProjectEdit.vue文件中 1、父级ProjectEdit.vue调用

桃扇骨/ 2022年02月18日 14:21/ 0 赞/ 387 阅读

相关 vue 父组件与子组件相互通信

vue 父组件与子组件相互通信一、父组件给子组件传值 props 实现父组件向子组件传值。 1父组件里： <child-pack :msg

柔光的暖阳◎/ 2021年12月05日 15:56/ 0 赞/ 379 阅读

相关 vue 父组件调用子组件

1、在父组件里引用自组件 <generate-report @closeAddReport="closeAddReport" ref="addreport"><

谁借莪１个温暖的怀抱￠/ 2021年11月17日 09:02/ 0 赞/ 470 阅读

相关 Vue入门-子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信 > 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), > > 该方法在子组件的methods中声明,实现功能th

太过爱你忘了你带给我的痛/ 2021年09月15日 14:22/ 0 赞/ 511 阅读