vue组件传值

vue父子组件传值

子组件定义props获取

父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息,即 prop 向下传递,事件向上传递。

3个props方式:
(驼峰式命名的props属性需要在父组件用的时候改成用-来连接两个单词)
(比如 todoList --> todo-list)
1.
props: ['todoList']

2.
props: { 
    //这样可以指定传入的类型,如果类型不对,会警告 
    todoList: Array 
}

3.
props: { 
    todoList: { 
        type: Array, 
        default: [0,0,0] 
        //这样可以指定默认的值 
    } 
}

一个例子;

// 子组件里定义字段接受父组件传递的数值
// 然后直接使用就好了
<a @click="del(item.id)">-</a> 
props:{
	todoList:Array,
	del:Function,
	save:Function,
	update:Function,
}
 methods:{
        del(id){
            // 第一个参数是props里方法对应的函数属性,
            // 后面跟上参数列表是父组件里需要的子组件传回的数据
            // 实现子组件给父组件传递值
            // 单向数据流的概念需要理解,
            // 实际上是由父组件改变内容,子组件是触发这个改动
            this.$emit('del',id);
        },
        saveCheck(){
            this.$emit('save');
        }
  }

    
    
    
// 父组件使用,动态绑定给相应的数值类型就ok
//需要函数就传递函数
// 需要数组就传递数组,对象就对象
// todoList 需要更换成 todo-list
<TodoItem 
	:todo-list="notDoneList" 
    @del="delTodoItem" 
    @save="save" 
    @update="updateTodoItem"/>
// delTodoItem()等是父组件的方法

父组件主动获取子组件的数据和方法

1.调用子组件的时候给子组件定义一个ref
<todoitem ref="todoitem"/>
    
2.父组件通过
// 相当于操作 DOM 
this.$refs.todoitem.属性
this.$refs.todoitem.方法

子组件主动获取父组件的数据和方法

this.$parent.属性
this.$parent.方法

非父子组件传值

建立公共Vue实例

// 新建一个js文件
// 创建一个Vue()实例
import Vue from 'vue';

var vm = new Vue();

export default vm;

在组件里通过对同一个事件进行监听和触发

传递数据

需要触发传递数据的组件

vm.$emit("自定义事件名","参数列表")

// 引入定义的vm 实例
import Vm from '../model/Vm.js';


// 在函数里使用

methods:{
    vm_emit(){
        Vm.$emit('function_name',this.数据...)
    }
}

接收数据

需要用到数据的组件

vm.$on.("自定义事件名",callback)

// 引入定义的vm 实例
import Vm from '../model/Vm.js';


// 在监听function_name
// 创建一开始就监听
mounted:{
   Vm.$on('function_name',function(data){
       // ...使用数据
   })
}


奖励一下