主页 > 教程合集 > 网站建设 >

Vue如何在父组件中使用子组件

时间:2020-05-31 阅读:0

首先简单回顾一下定义组件用到的参数。

components:定义一个新的组件

template:书写组件中的html内容,用一对``括起来

Vue如何在父组件中使用子组件

首先一开始,先写一下子组件的内容,因为要多次调用所以赋给了变量child:


var child = {
            template:`
                <ul>
                    <p>这是子组件内容</p>
                    <li><button>1</button></li>
                    <li><button>2</button></li>
                    <li><button>3</button></li>
                </ul>
            ` //定义子组件内容   
        }
 

接下来,写一下父组件的内容,同时在父组件中使用到了子组件,所以加入了components的设置:


var parent = {
            template:`
                <div>
                    <h2>这是父组件内容</h2>
                    <page></page>
                </div>
            `, //定义父组件内容
            components:{
                'page':child //将子组件内容赋给page自定义标签
            }
        }
 

最后就是Vue实例化,同时加入components的设置,加入父组件:


var app = new Vue({
            el:'#app',
            components:{
                'rabbit':parent
            } //将父组件内容赋给rabbit自定义标签
        })
 

完整代码:


<div id = 'app' v-cloak>
        <rabbit></rabbit>
    </div>
    <script>
        var child = {
            template:`
                <ul>
                    <p>这是子组件内容</p>
                    <li><button>1</button></li>
                    <li><button>2</button></li>
                    <li><button>3</button></li>
                </ul>
            ` //定义子组件内容   
        }
        var parent = {
            template:`
                <div>
                    <h2>这是父组件内容</h2>
                    <page></page>
                </div>
            `, //定义父组件内容
            components:{
                'page':child //将子组件内容赋给page自定义标签
            }
        }
        var app = new Vue({
            el:'#app',
            components:{
                'rabbit':parent
            } //将父组件内容赋给rabbit自定义标签
        })
 

代码量非常少,但是这段代码很好的描述了书写一对父子组件的过程,父子组件内容复杂起来,就可以产生很大的效用。

本站所有资源均在Resource资源站有分享,你可以点击 >>> Resource 进入资源站自助提取。

余斗余斗
  • 版权声明:原创文章由发表在网站建设分类下,2020-05-31最后更新,转载注明出处。

相关推荐

返回顶部