首页 / VUE / Vue.js组件理解
Vue.js组件理解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js组件理解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含6398字,纯文字阅读大概需要10分钟。
内容图文
组件使用细节点
解决元素标签位置错误的问题:is 属性
<div
id=
"app"
>
<table>
<tbody>
<!--tbody里要用一个组件,但不能直接写组件名
会导致位置错误问题,使用 is 属性将自定义组件row
与 tr 标签绑定在一起
-->
<tr
is=
‘row‘
></tr>
<tr
is=
‘row‘
></tr>
<tr
is=
‘row‘
></tr>
</tbody>
</table>
<ul>
<li
is=
‘row‘
></li>
<li
is=
‘row‘
></li>
<li
is=
‘row‘
></li>
</ul>
</div>
<script>
Vue.component(‘row‘,{template:‘<tr><td>this is a row</td></tr>‘});var vm =newVue({el:"#app"});</script>
组件data函数
在子组件中,data 必须是一个函数,有可能一个子组件会被调用很多次,每个子组件数据不能产生冲突,通过一个函数返回一个对象的目的,就是让每个子组件都拥有独立的数据存储。
Vue.component(‘row‘,{//在子组件中,data 必须是一个函数data:function(){return{content:‘this is a row‘}},template:‘<tr><td>{{content}}</td></tr>‘});
ref的使用
<div
id=
"app"
>
<counter
ref=
"one"
@change
=
"handleChange"
></counter>
<counter
ref=
"two"
@change
=
"handleChange"
></counter>
<div>{{total}}</div></div><script>Vue.component(‘counter‘,{template:‘<div @click="handleClick">{{number}}</div>‘,data:function(){return{number:0}},methods:{handleClick:function() {this.number++;// $emit() 自定义事件向父组件通信this.$emit(‘change‘);}}});var vm =newVue({el:"#app",data:{total:0},methods:{handleChange:function() {//可以使用自加一方法//this.total++;//也可以求二者之和// 通过 $refs 获取子组件的引用,再获取数据this.total=this.$refs.one.number+this.$refs.two.number;}}});
父子组件的数据传递
父组件通过属性的形式向子组件传递数据
Vue 中的单项数据流:父组件可以向子组件传递参数,该参数在父组件可随便修改,子组件绝对不能反过来去修改父组件传递过来的参数,只用不改
<div
id=
"app"
>
<!--父往子传递-->
<!--父组件通过绑定属性的形式向子组件传递数据-->
<counter
:count=
"3"
@inc
=
"handleIncrease"
></counter>
<counter
:count=
"2"
@inc
=
"handleIncrease"
></counter>
<!--子往父传递-->
<!--子组件通过事件触发的形式向父组件传递数据-->
<div>{{total}}</div></div><script>var counter ={props: [‘count‘],data:function() {return{//定义一个number 把获取来的数据克隆一个传进去number:this.count}},template:‘<div @click="handleClick">{{number}}</div>‘,methods:{handleClick:function() {this.number+=2;//子组件通过点击将事件触发出去this.$emit(‘inc‘,2)
}}}var vm =newVue({el:"#app",components:{counter: counter
},data:{total:5},methods:{// 父组件执行的函数里可以直接接收到 $emit()的参数handleIncrease:function(step) {this.total+= step;}}});
组件参数校验与非props特性
<div
id=
"app"
>
<child
:content=
"123"
></child>
</div>
<script>
Vue.component(‘child‘,{props:{//设定子组件接收的content 属性,// 要么是数字,要么是字符串content: [String, Number]
/* 也可以这样写: content: { //类型 type: String, //设定这个属性是必须的 required: true, //如果不给default 传数值,默认default default: ‘default value‘, //对传入 content属性 添加校验 //规定长度必须大于5 validator: function(value) { return (value.length > 5) } } */},template:‘<div>{{content}}</div>‘})
var vm =newVue({el:"#app"});
props 特性:
父组件传递了content 子组件又声明了一个content接收; 二者有一个对应关系。该属性不会在DOM中出现,子组件可直接通过插值表达式调用content内的内容。
非props 特性
父组件传递一个属性,但是子组件并没有props的内容,没有声明,无法获取父组件内容。该属性会在子组件DOM中出现
给组件绑定原生事件
<div
id=
"app"
>
<!--
加native修饰符,监听原生点击事件,
方法同子组件设置自定义事件向父组件触发
-->
<child
@click.native
=
‘handleClick‘
></child>
</div>
<script>
Vue.component(‘child‘,{template:‘<div>child</div>‘})
var vm =newVue({el:"#app",methods:{handleClick:function() {alert(‘click‘)
}}});</script>
非父子组件间的传值
- 借助官方的数据框架 vuex解决
- 发布订阅模式 总线机制 Bus 观察者模式
<!--非父子组件传值
Bus / 总线 / 发布订阅模式 / 观察者模式
-->
<div
id=
"app"
>
<!--点击一个,另一个变成相同的-->
<child
content=
‘anqw‘
></child>
<child
content=
‘joe‘
></child>
</div>
<script>
//每一个Vue 实例都会有bus 属性
Vue.prototype.bus=newVue()
Vue.component(‘child‘,{data:function() {return{//父组件传过来的数据只能用不能改,//所以需要拷贝一份selfContent:this.content}},props:{content: String
},template:‘<div @click="handleClick">{{selfContent}}</div>‘,methods:{handleClick:function() {//实例上挂载的bus ,这个bus 又是Vue 实例,//所以会有$emit()方法,同时把内容传进参数this.bus.$emit(‘change‘,this.selfContent);}},//借助生命周期钩子,被挂载时执行//$on 方法监听自定义事件mounted:function() {//固定this的指向var this_ =this;this.bus.$on(‘change‘,function(msg) {this_.selfContent= msg
})
}})
var vm =newVue({el:"#app"});
在Vue中使用插槽 slot
<div
id=
"app"
>
<child>
<!--插槽-->
<!--如果不传标签会显示默认内容-->
<h1>Anqw</h1></child></div><script>Vue.component(‘child‘,{//slot插槽中显示的是父组件插入的标签template:‘<div><p>hello</p><slot>默认内容</slot></div>‘})
var vm =newVue({el:"#app"});</script>
将多个插槽一一对应
<div
id=
"app"
>
<body-content>
<div
class=
"header"
slot=
‘header‘
>header</div><div class="footer" slot=‘footer‘>footer</div></body-content></div><script>Vue.component(‘body-content‘,{//将插槽一一对应,用slot 与 name 属性绑定template:`<div> <slot name=‘header‘></slot> <div > content </div> <slot name=‘footer‘></slot> </div>`});var vm =newVue({el:"#app"});</script><!-- 显示结果: header content footer-->
Vue 中的作用域插槽
<div
id=
"app"
>
<child>
<!--首先父组件内传了一个插槽,
作用域插槽,必须用 template 标签包裹,
同时声明从子组件接收的数据都放在props中,
slot-scope 对应的属性名接收到数据后,
以li的形式进行展示.
-->
<template
slot-scope=
"props"
>
<!--由父组件传递循环对应的模板-->
<li>{{props.item}} - hello</li></template></child></div><script>Vue.component(‘child‘,{data:function() {return{list: [1,2,3,4]
}},//当子组件做循环,DOM结构需要由外部传递时template:`<div> <ul> <slot v-for="item of list" :item="item"> </slot> </ul> </div>`});var vm =newVue({el:"#app"});</script>
动态组件与v-once指令
<div
id=
"app"
>
<!--动态组件-->
<!--会根据 is 中数据的变化去加载不同的组件-->
<!--<component :is="type"></component>-->
<child-one
v-if=
"type === ‘child-one‘"
></child-one>
<child-two
v-if=
"type === ‘child-two‘"
></child-two>
<button
@click
=
"handleClick"
>change</button><!--当点击button时 两个组件 toggle显示--></div><script>Vue.component(‘child-one‘,{// v-once 可以把组件暂时放到内存里,// 点击之后直接从内存里取出就行,提高了性能template:‘<div v-once>child-one</div>‘});Vue.component(‘child-two‘,{template:‘<div v-once>child-two</div>‘});var vm =newVue({el:"#app",data:{type:‘child-one‘},methods:{handleClick:function() {this.type= (this.type===‘child-one‘?‘child-two‘: ‘child-one‘);}}});</script>
原文:https://www.cnblogs.com/anqwjoe/p/9053431.html
内容总结
以上是互联网集市为您收集整理的Vue.js组件理解全部内容,希望文章能够帮你解决Vue.js组件理解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。