关于vue2.0组件通信

1.父组件通过props属性给子组件通信

//父组件
<template>
<child :show="is_showshare" :age="age"></child>
</<template>
<script>
import child from '@/components/child'export default{data(){return{is_showshare:false,age:10} },components:{child}
}
</script>//子组件
//方法一
<template><div v-show="show">分享</div>
</<template>
<script>export default{props:['show']}</script> //方法二<template><div v-show="show">分享</div></<template>
<script>export default{props: {// 检测类型show: [Boolean,Number],// 检测类型 + 其他验证age: {type: Number,default: 0,//设置默认值required: true,//必填validator: function (value) {//自定义验证函数return value >= 0}}
}

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

2.子组件触发父组件
父组件自定义一个事件hideshare，子组件通过this.$emit()来触发绑定的事件hideshare,然后父组件监听hideshare，一旦hideshare被触发便会触发父组件的parenthide方法。

//父组件
<template>
<child :show="is_showshare" :age="age" @hideshare="parenthide"></child>
</<template>
<script>export default{data(){return{is_showshare:false,age:10}},methods:{parenthide:function(v){console.log('hideshare',v);//'hideshare' falsethis.is_showshare=false;}}
}
</script>//子组件
<template><div v-show="show">分享<p @click="hide">隐藏分享</p></div>
</<template>
<script>export default{props:['show'],methods:{hide:function () {this.$emit('hideshare',false)}} }</script>

3.兄弟组件通信
借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发

index.vue里有2个兄弟组件，c1.vue,c2.vue,点击c2组件里边添加点击事件，在c2组件里打印出点击的是哪个dom元素

<template>
<div><c1></c1><c2></c2></div>
</template>
<script>import showv from '@/components/show.vue'import clickv from '@/components/click.vue'
export default {name: "index",components:{showv,clickv}
}
</script>

1.新建一个公共的Vue的实例对象

com.js

import Vue from 'vue'
export  default new Vue();

2.c1.vue里触发事件

<template>
<div @click="doclick($event)">click</div>
</template>
<script>import com from '@/components/com.js'export default{name: "",data(){},methods: {doclick(event){com.$emit('gettarget',event)}}}
</script>

3.c2.vue事件绑定

<template><div> show</div>
</template>
<script>
import com from '@/components/com.js'export default{name: "",created(){com.$on('gettarget',target=>{console.log('兄弟组件通信成功',target);})}}
</script>

关于vue2.0组件通信相关推荐

vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
vue2.0组件之间的通信
官方建议可以直接使用一个空vue实例来处理简单的事件触发机制 var bus = new Vue(); bus.$emit('create',{title:'name'}); bus.$on('cre ...
Vue2.0组件实现动态搜索引擎（二）
接上一篇,完成logo部分我们就要开始整个项目的核心--panel组件. 整个panel组件分为3个部分:关键字输入框,相关搜索建议下拉列表和搜索跳转按钮. 由于我们整个项目是设计成父子组件的架构所以 ...
vue2.0组件生命周期探讨
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>vue ...
Vue2.0组件注册
组件注册分为全局注册和局部注册 import 名称 from '包地址'//app.component用来对组件进行全局注册 app.component('my-swiper' ,'导包时使用的名 ...
Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)
效果 <template><div ref="txttype" class="bottom"><div :class=" ...
项目vue2.0仿外卖APP（五）
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
Vue3 - 组件通信（父传子）
前言在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...

关于vue2.0组件通信

1.新建一个公共的Vue的实例对象

2.c1.vue里触发事件

3.c2.vue事件绑定

关于vue2.0组件通信相关推荐

最新文章

热门文章