标签:通信 组件 改变 自定义事件 属性 警告 hang 赋值 mit
props 属性
》parent 组件 parent.vue
<parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; }
》child 组件 child.vue
写法一 props: [‘childMsg‘] // 驼峰式 写法二 props: { childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告 } 写法三 props: { childMsg: { type: Array, // 类型 default: [0,0,0] //这样可以指定默认的值 } }
vue是单向数据传递,子组件想要改变数据,需通过触发自定义事件来通知父组件改变数据,从而达到改变子组件数据的目的.
》child 组件 child.vue
<template> <button @click="sendToParent">点击按钮</button> </template> methods: { sendToParent() { this.$emit(‘childGet‘,‘父组件获取到子组件传递的数据‘); //主动触发 } }
》parent 组件 parent.vue
<div> <child @childGet="change" :msg="msg"></child> //监听子组件触发的childGet事件,然后调用change方法 </div> methods: { change(msg) { //参数msg是子组件传递的值 this.msg = msg; // 赋值给绑定的msg 属性 } }
子组件与子组件之间通信 若项目逻辑较复杂,建议使用 vuex
vuex 介绍和具体使用见 官方文档 https://vuex.vuejs.org/
具体见demo https://github.com/136shine/study_demo/tree/master/vue-demo1
标签:通信 组件 改变 自定义事件 属性 警告 hang 赋值 mit
原文地址:http://www.cnblogs.com/136asdxxl/p/7152844.html