今天跟大家聊聊如何深刻理解Vue组件的创建和使用,可能很多人都不太懂。为了让大家更好的了解,边肖为大家总结了以下内容,希望大家能从这篇文章中有所收获。
00-1010 Component是Vue.js最强大的功能之一Components可以扩展HTML元素,封装可重用的代码。在更高的层次上,组件是一个自定义元素,Vue.js的编译器为其添加了特殊的功能。
一、什么是组件?
二、创建全局组件
方式一
varcom 1=Vue . extend({ 0
//通过模板属性,指定组件要显示的HTML结构
Template:'h4这是使用Vue.extend /h4 '创建的组件
})
1、Vue.extend
vue.component('组件的名称',创建的组件模板对象)注册组件。
Vue.company ('mycom1 ',com1)注意:如果在使用Vue.company注册时全局组件的名称是由hump命名的,那么在引用Vue.Component时需要将大写的hump改为小写字母,同时在两个单词前使用“”链接。不用的话就直呼其名。
2、Vue.component
方式二
Vue.component(' myco m2 ',{ 0
Template:'divh4这是直接使用Vue.component创建的组件/h4
span123/span/div '
})示例:
00-1010 1.在受控#app之外,使用模板元素定义组件的HTML模板结构。
templateid='tmpl '
差异
H2这是通过模板元素/h2在外部定义的组件结构
H5工作得很好,还不错!/h5
/div
铌
sp; </template>
2、使用id注册组件
Vue.component('mycom3', { template: '#tmpl' })
三、 创建局部组件
局部组件的创建和全局组件的创建方法一样。唯一区别的是,局部组件是在Vue实例中定义的。
四、组件中的data 和 methods
1、组件可以拥有自己的数据。
2、组件中的data 和实例中的data 有点不一样,实例中的data 可以为一个对象。但是组件中的data必须是一个方法。
3、组件中的data除了是一个方法,还必须返回一个对象。
4、组件中的data 的使用方式和 实例中的data 使用方式一样。(methods也一样)
五、组件间的通信方式
props/$emit
父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。
子组件:
<template> <div class="hello"> <ul> <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li> </ul> </div> </template> <script> export default { name: "users", props: { users: { //父组件中子标签自定义的名字 type: Array, require: true } } } </script> <style scoped> li{ list-style-position: inside; } </style>
父组件:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <Users v-bind:users="users"> </Users> </div> </template> <script> import Users from "@/components/users"; export default { name: 'App', data(){ return { users: ['西安邮电','西安石油','西北政法','西安工业','西安财经'] } }, components: { Users, } } </script>
通过事件形式
子组件:
<template> <header> <h2 @click="changeTitle">{{ title }}</h2> </header> </template> <script> export default { name: "Son", data(){ return { title: 'Vue.js Demo' } }, methods: { changeTitle(){ this.$emit('titleChanged','西安邮电大学'); } } } </script> <style scoped> h2{ background-color: greenyellow; } </style>
父组件:
<template> <div id="app"> <Son v-on:titleChanged="updateTitle"></Son> <h3>{{ title }}</h3> </div> </template> <script> import Son from "@/components/Son"; export default { name: "Father", data(){ return { title: '传递的是一个值' } }, methods: { updateTitle(e){ this.title = e } }, components:{ Son, } } </script>
子组件通过events(事件)给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。
看完上述内容,你们对怎么深入了解Vue组件的创建和使用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/157916.html