vue2.0嵌套组件之间的通信($refs,props,$emit)

vue的一大特色就是组件化,所以组件之间的数据交互是非常重要,而我们经常使用组件之间的通信的方法有:props,$refs和emit。

初识组件之间的通信的属性和方法

props的使用

子组件使用父组件的数据,使用vue的属性props。

当我们在父组件parent里面嵌套一个子组件son的时候,如果我们需要使用父组件的数据的时候,我们可以在子组件标签上面绑定一个属性,然后在子组件里面通过props来调用这个属性,就可以使用这个数据了。

//父组件

<sonPart :list="listDate"></sonPart>

//子组件

<div>{{list}}</div>
export default{
  props:["list"]
}

props的数据类型

1,数组:当我们简单使用数据的时候,这时候props可以是一个数组的类型

props: ['list1','list2'.....]

2,对象:当我们要设置所使用的数据的类型、默认值等的时候,props就可以是一个Object类型

props: {
  list1: {
    type: Number/String/Boolean/Array/Object,   //类型
    default: function (){return},   //默认值
    required: true/false     //是否必填
  }
}

$refs

vue有一个$refs属性,当只是组件的内容的时候,可以通过这个属性获得DOM元素,对这个DOM进行操作;如果是这个组件的子组件的时候,可以通过这个属性获得这个子组件对象,就可以访问这个组件里面的data与methods里面的内容了。(这时候取得子组件的数据一般是静态的)

$refs的使用

在DOM标签或者组件标签的时候,添加一个ref属性,ref="name"。

添加这个属性后,就可以通过this.$refs.name获得这个DOM元素或者子组件

//父组件

<son ref="children"><son>

export default {
  mounted: {
   //这时候就可以获得了这个子组件
    let son = this.$refs.children
    }
}

$emit

当父组件获取的数据,需用通过子组件来动作(click、change等)改变后数据,这时候我们通过ref是获取不到的,获取的也是改变前的数据。

因为emit绑定的事件触发的时候,附加参数都会传给监听器回调。所以数据就会改变

//父组件

//template部分
<sonPart @getList="enter"></sonPart>

//js部分
import sonPart from './sonPar.vue';
export default{
 data () {
   radioData: ''
  },
  methods:{
    enter:function(value){
      this.radioData = value
    }
  },
   components: {sonPart}
}
//子组件

<form @change="getData">
  <label><input type="radio" v-model="dataList" value="0" name="list1">one</label>
  <label><input type="radio" v-model="dataList" value="1" name="list1">two</label>
</form>

export default{
  data () {
    dataList:''
  },
  methods:{
    getData:function(){
      this.$emit("getList",this.dataList);
    }
  }
}

$emit的参数

当我们使用的emit的时候,第一个参数为父组件使用方法名,后面一个参数为传递的数据。当数据有几个的时候,可以使用对象的形式传递参数。

methods: {
  getData: function() {
    this.$emit("getList",{name: this.dataList,value:"leo"[,....]}
  }
}

站在巨人的肩膀上摘苹果:

https://blog.csdn.net/weixin_33813128/article/details/94177294

https://www.jb51.net/article/140581.htm

原文地址:https://www.cnblogs.com/eternityz/p/12272485.html

时间: 2024-09-30 22:15:41

vue2.0嵌套组件之间的通信($refs,props,$emit)的相关文章

VUE 2.0 父子组件之间的通信

父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; } 子组件通过props来接受数据 第一种方法 props: ['childCom'] 第二种方法 props: { childCom: String //这里

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

vue2.0父组件与子组件之间的通信

vue是一个轻量级的渐进式框架,对于它的一些特性和优点包括环境的一些配置在此就不做赘述,本篇文章主要来探讨一下vue子父组件之间通信的问题 首先我们先来看一个demo,目录结构为这样: ?src        ?components          ?child.vue ?app.vue 此时App.vue应为这样: 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue中创建props,然后创建一个名为message

Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信

Vue自定义组件: 组件:就是一个大的对象:new Vue({})就是一个组件定义一个组件:1.全局组件: <div id="box"> <aaa></aaa> </div> var Aaa=Vue.extend({ template:'<h3>我是一个标题</h3>' }); Vue.component('aaa',Aaa); a)给自定义的组件添加数据: data必须是函数的形式,函数必须返回一个对象(json

vue2.0 父子组件通信 兄弟组件通信

父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; } 子组件通过props来接受数据 第一种方法 props: ['childCom'] 第二种方法 props: { childCom: String //这里

vue2.0 父子组件 通信

一.父组件传递数据给子组件 (  parent  ==> children  ) props 属性 >parent 组件 parent.vue <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } >child 组件 child.vue 写法一 props: ['chil

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi

react 实现组件嵌套以及子组件与父组件之间的通信

当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件:GenderSelect 渲染:

vue2.0父子组件通信的方法

vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传递.为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定.props方法传值比较简单,缺点是属性会比较多. (1)父传子 [ props传值 ] <template>  <div> <input type="text" v-mode