vue组件的总结( 组件传值 )

例子组件1:

<template>
<section class="checkbox-con">
<div class="checkbox">
<input type="checkbox" v-model="flag" @change="change">
<img src="../assets/img/small_icon/checked1.png" v-show="flag">
</div>
</section>
</template>
<script>
export default {
props: {
val: {
type: Boolean
},
index:{
type: String
}
},
data() {
return {
flag: this.val
}
},
computed: { //可以简称挂钩,_index这个data永远和this.index挂钩了
_index(){
return this.index
}
},
watch: {
val(newVal, old) {
return this.flag = !newVal;
}
},
methods: {
change() {
this.$emit('on-change');
}
}
}
</script>
<style lang="scss">
.checkbox-con {
.checkbox {
//自定义checkbox样式
width: .15rem;
height: .15rem;
border-radius: 50%;
overflow: hidden;
border: 1px solid #ccc;
position: relative;
input[type="checkbox"] {
width: .16rem;
height: .16rem;
position: absolute;
margin: 0;
z-index: 1;
opacity: 0;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
}
</style>

//调用页面的html:(on-change是自己写法方法)

例子组件2:

//暴露了两个事件在外面,在外面就能直接控制里面的参数来达到显示隐藏的效果
//this.$eventhub.$emit("shareshow",url) //第一个参数是组件里的方法,第二参数是传过去的参数
<template>
<section class="share_index">
<div class="share-popu" v-show="show" v-on:click="show=false">
<div class="inner">
<h1>你可以</h1>
<div class="con-text">
<p>1.请点击右上角将商品分享给指定朋友或分享到朋友圈</p>
</div>
<div class="con-text">
<p>2.邀请好友扫二维码：</p>
<VueQRCodeComponent align="center" :text="shareLink" :size="160" class="qrbox"></VueQRCodeComponent>
</div>
</div>
<div class="arrow">
<img src="../../assets/img/share_arrow.png" alt="">
</div>
</div>
</section>
</template>
<script>
import VueQRCodeComponent from 'vue-qrcode-component'
export default {
components: {
VueQRCodeComponent,
},
props: {

},
data() {
return {
shareLink: "",
show: false,
}
},
created(){
this.$eventhub.$on('sharehide', ()=>{
this.show = false;
});
this.$eventhub.$on('shareshow', (text)=>{
if (text)
this.shareLink=text;
this.show = true;
});
},
}
</script>
<style lang="scss">
.share_index {
.share-popu{
z-index: 9999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: rgba(0,0,0,.6);
.inner{
width: 62%;
margin-left: .25rem;
margin-top: .65rem;
}
.arrow{
width: .71rem;
height: .71rem;
position: absolute;
top: .35rem;
right: .3rem;
img{
width: .71rem;
height: .71rem;
vertical-align: middle;
}
}
h1{
font-weight: 400;
font-size: .2rem;
color: #fff;
}
.con-text{
margin-top: .3rem;
p{
line-height: 1.5;
font-size: .13rem;
color: #fff;
}
.qrbox{
img{
margin-top: .1rem;
width: 1.66rem;
height: 1.66rem;
vertical-align: middle;
}
}
}
}
}

</style>

传参写法:

1.组件给组件传值:

1.在组件中定义一个on方法,外面可调用这个on方法并传参过来

created(){

this.$eventhub.$on('showMap', (text)=>{

this.showMapBox = true

this.searchText = text

setTimeout(function(){

this.init()

},100);

});

2.另一个组件中用$emit来调用组件定义的方法:

this.$eventhub.$emit('showMap', 'aaa')

2.组件给页面传值:

1.先在组件中用this.$emit调用一个方法

<button @click="spot">点我给app.vue传值</button>

methods:{

spot(){

this.$emit("spot", "我是之组件传给父组件的内容.")

}

2.在页面中调用这个组件时给一个出口v-on

methods:{

spot:function(data){

console.log(data)

alert(data)

//父组件直接用 v-on 来监听子组件触发的事件，需跟子组件中的$emit组合使用。

}

3.页面给组件传值:

1.在html中加入:名称="值"

2.在组件中加入prop属性

props:{

fdnLon:{

type: Number, //这样传进来的参数就会到了this.fdnLon

required: true

mounted() {

if (this.fdnLon >= 0) { //上面接收到参数后,会到这里来

this.aaa = this.fdnLon

}

computed: {

_fdnLon() { //可以简称挂钩,_index这个data永远和this.index挂钩了(在组件中不写这个也行,不知道这样写的作用)

return this.fdnLon;

_fdnLat() {

return this.fdnLat;

}

4.页面给组件传值(页面调用组件方法)(vue.js 2.0 关于ref–绑定dom对象并获取)

1.在页面中调用这个组件时给一个ref

2.调用组件里的方法同时可以传参

this.$refs.map.init(this.main.fdnLon,this.main.fdnLat) //调用map里面的init方法,且传2参数

3.组件里像平时一样写个init方法就好

4.ref="menu-wrapper"时要改成ref="menuWrapper",否则报错

vue组件的总结( 组件传值 )相关推荐

vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
vue组件的基本使用，以及组件之间的基本传值方式
组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:Vue.com ...
vue引入id3_Vue页面间传值，客户端数据存储，以及父子组件间props传值
初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值
Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,其中之一就是组件的传值. 搭建的框架目录结构一.父传子动图效果及源码父传子源码: 父组件: 子组件: 二.子传父动 ...
【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）
父组件传值给子组件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
vue 父组件给子组件传值
vue中父组件给子组件传值 (一)事件传值事件传值在我理解也可以是父元素调用子元素的函数,背景是,当页面元素有多个对话框,恰好每一个对话框又是一个子元素,父元素中某些按钮控制对应的子元素对话框的开和 ...
vue 子组件给父组件传值
vue通信之子组件给父组件传值子组件给父组件传值背景一般是子组件中某一事件之后,得到的某一状态或者是值,想要通知父组件改变. 通过自定义事件传值. 子组件: <Button type=&quo ...
Vue.js（8）- 父组件给子组件传值
父组件给子组件传值原理:属性绑定第一步:建立连接 B.vue <template><div><h3>这是B.vue文件内容</h3><h4> ...

vue组件的总结( 组件传值 )

vue组件的总结( 组件传值 )相关推荐

最新文章

热门文章