什么是组件?
vue中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘,键盘,鼠标),它就是一个具有独立逻辑或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。
页面就是由一个个类似这样的部分组成的,比如导航,列表,弹窗,下拉列表等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。
前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。
使用组件的好处?
1、提高开发效率
2、方便重复使用
3、简化调试步骤
4、提升整个项目的可维护性
5、便于协同开发
vue中的组件
vue中的组件是一个自定义标签,vue.js的编译器为它添加特殊功能
vue中的组件也可以扩展原生的html元素,封装可重用的代码
组件的基本组成:样式结构,行为逻辑,数据
注册组件
全局注册
可以在任何模板中使用,使用之前要先注册
语法:使用Vue.compontent(组件名,选项对象)
组件名命名约定:驼峰,烤串
在html中使用组件:使用烤串命名法
例如,注册Vue.compontent('my-compontent',{}),使用的时候<my-compontent></my-compontent>
<div id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注册组件
Vue.component('cus-list',{
data(){
return {
}
},
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
使用的时候,只要在页面上召唤这个组件就可使用,并且可以复用。
组件.png
局部注册
在组件实例中通过选项对象注册,只在所注册的作用域中使用
<div id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
new Vue({
el:"#app",
components:{
'cus-list':{
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
}
},
data:{
}
})
</script>
局部注册的组件,只有在当前实例的作用域中才可以使用,在作用域中也可以复用,效果如下。
组件.png
父子组件间通信
父组件给子组件通信
父组件===》子组件(用props)
组件实例的作用域是孤立的,不能再子组件直接用父组件的数据。
可以在组件上使用自定义属性绑定数据,在组件中组要显示的用props生命自定义属性名。
也就是记住一句话,父组件给子组件传值得时候,就是调用组件时给组件添加 一个属性,然后在组件内用props接收即可,组件内根据属性名即可使用。
<div id="app">
<h2>自定义下拉框</h2>
<cus-list btn-value="查询"></cus-list>
<cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('cus-list',{
data(){
},
props:['btnValue'],
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" :value="btnValue">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
页面效果
props传值.png
子组件给父组件通信
子组件===》父组件
需要用到自定义时间,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件。
1、在子组件中定义事件内容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"
3、在触发子组件事件的时候,$emit 通知父组件 this.$emit("receive",item);
4、父组件根据自定义事件进行相应反馈changeValue:function(value){this.val = value;}
看如下案例,点击input的时候,出现下拉列表框,选中相应的列表,列表内容出现在input框中。
<div id="app">
<h2>自定义下拉框</h2>
<cus-list select-Value="搜索" v-bind:list="list1" >
</cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注册组件
Vue.component('cus-list',{
data(){
return {
selectShow:false,
val:''
}
},
props:['selectValue','list'],
template:`
<section>
<div>
<div>
<input type="text" @click="selectShow = !selectShow" :value="val">
<input type="button" name="" :value="selectValue">
</div>
<list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
</div>
</section>
`,
methods:{
changeValue:function(value){
this.val = value;
}
}
})
Vue.component('list-li',{
props:['list'],
template:`
<ul>
<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
</ul>
`,
methods:{
clickLi:function(item){
this.$emit("receive",item);
}
}
})
new Vue({
el:"#app",
data:{
list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']
}
})
</script>
组件最基本的应用就是如此,深入的应用,就会发现很多刚好玩的东西。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍vue2.0父子组件及非父子组件之间的通信方法,包括了vue2.0父子组件及非父子组件之间的通信方法的使用技巧和注意事项,需要的朋友参考一下 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组
本文向大家介绍详解Vue之父子组件传值,包括了详解Vue之父子组件传值的使用技巧和注意事项,需要的朋友参考一下 一、简要介绍 父子组件之间的传值主要有三种:传递数值、传递方法、传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue 可以看到,在子组件中的data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性,接
本文向大家介绍Vue父子组件之间的通信实例详解,包括了Vue父子组件之间的通信实例详解的使用技巧和注意事项,需要的朋友参考一下 在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小
本文向大家介绍详解vue父子组件间传值(props),包括了详解vue父子组件间传值(props)的使用技巧和注意事项,需要的朋友参考一下 先定义一个子组件,在组件中注册props 在父组件中,引入子组件,并传入子组件内需要的值 这种方式只能由父向子传递,子组件不能更新父组件内的data 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍Vue中父子组件通讯之todolist组件功能开发,包括了Vue中父子组件通讯之todolist组件功能开发的使用技巧和注意事项,需要的朋友参考一下 一、todolist功能开发 二、todolist组件拆分 定义组件,组件和组件之间通讯 1、全局组件 2、局部组件 要注册,否则会报错: vue.js:597 [Vue warn]: Unknown custom element: <
本文向大家介绍vue之父子组件间通信实例讲解(props、$ref、$emit),包括了vue之父子组件间通信实例讲解(props、$ref、$emit)的使用技巧和注意事项,需要的朋友参考一下 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和