vue组件

最新推荐文章于 2022-07-27 19:46:04 发布

K--kkkkk

最新推荐文章于 2022-07-27 19:46:04 发布

阅读量134

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_50889870/article/details/117571518

版权

本文详细探讨了Vue.js中的组件系统，包括全局组件和局部组件的创建。重点讲解了组件间的通信方式，如子组件通过@事件向父组件传递数据，以及父组件通过属性向下传递数据给子组件。此外，还提到了使用`props`进行类型约束以及`ref`的使用场景。最后，简要介绍了Vue的动态组件及其应用案例。

摘要由CSDN通过智能技术生成

vue组件

全局组件：

使用 Vue.component('组件名',{
   
	template:`<div>模板</div>`,
	data(){
   
		return:{
   
			name:"张三'
		}
	},
	methods:{
   

	}

})
使用   <组件名></组件名>

局部组件：

使用 Vue.component('组件名',{
   
	template:`<div>模板</div>`,
	data(){
   
		return:{
   
			name:"张三'
		}
	},
	methods:{
   

	},
	components:{
   
		'aChild':{
   
			template:`<div>子组件只能在父组件的根节点内使用</div>`,
		data(){
   
			return:{
   
				sex:"男'
		}
		}
		}
	}

})

组件通信：
1.子传父：通过事件向上传递在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’
例如 <zi @myevent=‘getChild’>
子组件内容通过事件触发
使用 this.$emit(‘自定义事件名’,‘值’)传递数据

<div id="box">
        <zi @myevent='getchild'></zi>
    </div>

    <script>
        Vue.component('zi',{
   
            template:`
                <div>
                    子组件