Vue之自定义组件

最新推荐文章于 2024-10-06 22:31:10 发布

春风又一季

最新推荐文章于 2024-10-06 22:31:10 发布

阅读量421

点赞数

分类专栏： vue前端技术 Vue.js vue前端零碎

本文链接：https://blog.csdn.net/qq_40183281/article/details/89174218

版权

vue前端零碎同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue前端技术

14 篇文章 0 订阅

订阅专栏

Vue.js

9 篇文章 0 订阅

订阅专栏

1.在本界面引用

<body>
<div id="app">
	<person></person>
</div>

<script>
var Child = {
  template: '<h1>自定义组件!，这是一个人的定义</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
  					  // <person>将只在父模板可用
    'person': Child   // 组件的名称<person>
  }
})
</script>
</body>

2.引用另个一vue组件

在一个vue的项目中，我们有多个vue，每个页面的导航可能都是一样的，并且需要的代码比较多，那么我们就把它单独做一个vue组件在这里插入图片描述
引入一个叫Test3的组件，然后import进来，取名为Test3,然后将它放入到components的底下注册，最后在template下，使用标签引用。

3.在html中引入

<a href="" @click.prevent="componentId='login'">登录</a>
            <a href="" @click.prevent="componentId='register'">注册</a>
            <a href="" @click.prevent="componentId='exit'">退出</a>
            <!-- component是一个占位符，:is属性，可以用来指定要展示的组件名称 -->
            <!--将呈现的页面的空间-->
            <component :is="componentId"></component>

这里面还包括组件之间的切换

Vue.component('login',{
            template:'<h3 style="">登录组件</h3>'
        })
        Vue.component('register',{
            template:'<h3>注册组件</h3>'
        })
        Vue.component('exit',{
            template:'<h3>退出</h3>'
        })