全局组件和局部组件

简单来说，全局组件可以在整个页面中使用，在JS模板语法中，还可以导出到其它文件中使用。局部组件只能在挂载的Vue实例中使用

全局组件

定义方法：

Vue.component('name',{template:'<h1>welcome</h1>',data:()=>{return {}},methods:{},porps:[]
})

局部组件

定义方法：

new Vue({components:{name:{tempalte:'<h1>welcome</h1>',data:()=>{return {}},methods:{},props:[]}}
})

注册组件的2种方式

注意，组件必须使用单个根元素，否则Vue会提示错误

Error compiling template:Component template should contain exactly one root element

对象文本注册

// 这种注册方法没有代码提示Vue.component('name',{tempalte:'<h1>welcome</h1>'
})

模板注册

<body>// 注意，组件内容必须<tempalte id="temp"><div><h1>welcome</h1><p>welcome</p></div></tempalte>
</body>
<script>Vue.component('name',{template:'#temp'})
</script>

组件是使用

使用组件名称引用

<body><name></name>
</body>
<script>Vue.component('name', {template: '<h1>welcome</h1>'})
</script>

标签引用

使用component标签，绑定is属性，可以动态切换组件

<body><div class="app"><component :is="comName"></component><input type="button" value="switch" @click="myclick"></div>
</body>
<script src="vue.js"></script>
<script>Vue.component('first', {template: '<h1>first component</h1>'})Vue.component('second', {template: '<h1>second component</h1>'})new Vue({el: '.app',data: {comName: 'first'},methods: {myclick() {if (this.comName === 'first') {this.comName = 'second'} else {this.comName = 'first'}}}})
</script>

父子组件的传值

此处的父组件，指的是Vue实例，Vue实例某种意义上可以看作是一个组件。子组件指的是在Vue实例中引用的组件，不管是全局组件还是局部组件

参数之间的传递

使用v-bind动态传递父组件的值给子组件

<body><div class="app"><soncom :ptitle="title"></soncom></div>
</body>
<script src="vue.js"></script>
<script>var that = null;Vue.component('soncom', {template: '<h1>{{ptitle}}</h1>',props: ['ptitle']})new Vue({el: '.app',data: {title: '我是父组件的值'}})
</script>

利用事件机制，配合方法实现父子组件传值

<body><div class="app"><soncom :ptitle="title" @func="myClick"></soncom></div>
</body>
<script src="vue.js"></script>
<script>var that = null;Vue.component('soncom', {template: '<h1 @click="sonClick">{{ptitle}}</h1>',props: ['ptitle'],data: () => {return {sonTitle: '我是子组件的值'}},methods: {sonClick() {this.$emit('func', this.sonTitle)}}})new Vue({el: '.app',data: {title: '我是父组件的值',receiveTitle: ''},methods: {myClick(data) {this.receiveTitle = data}}})
</script>

Vue_01_组件的使用相关推荐

第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
第三天：Vue的组件化
1.认识组件化我们将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分. 组件化是Vuejs中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用 ...
客快物流大数据项目(六)：Docker与虚拟机的形象比喻及组件介绍
目录 Docker与虚拟机的形象比喻及组件介绍一.Docker与虚拟机的形象比喻
2021年大数据Hadoop（二十六）：YARN三大组件介绍
全网最详细的Hadoop文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录本系列历史文章前言 Yarn三大组件介绍 ResourceManager No ...
android layout组件,Android UI学习 - Linear Layout, RelativeLayout
1.一些常用的公共属性介绍 1) layout_width -宽 fill_parent: 宽度和父元素相同,wrap_content: 宽度随本身的内容所调整,或者指定 px值来设置宽 2) lay ...
vue 拓扑组件_Authing 登录组件优化实践解析
Authing Guard 是一种可嵌入的登录表单,可根据你的需求进行配置,它使你可以轻松添加各种社会化登录方式,以便你的用户可以无缝登录,并且在不同平台拥有一致的登录体验. Authing 2.0 ...
微信小程序自定义组件Component的简单使用
首先为什么要使用component 这里列举2个例子, 1 如果项目中多个地方使用同一个弹框, 2 两个同事合作写一个界面, 这2中情况使用组件是比较好的选择开始吧第一步首先创建一个包用于存放组件 ...
RelativeLayout布局，不希望文本盖住其他组件
简单的图先看上一看上面使用的是RelativeLayout布局(不要问为什么不用LinearLayout,因为最右边的信箱的右上角还会有个红点,相对布局直接些) 需要实现的效果是,TextView居 ...
spring 组件基于注解的注册方式
spring 中常用的组件标签有: @Controller:控制层 @Service:业务层 @Repository:数据层 @Component:普通的pojo注入到spring容器组件注册方式: ...

Vue_01_组件的使用

目录