2021/1/26 vue状态管理

（一）组件传值

组件传值

子组件

<input @input = "handleInput" :value="value"> //绑定handleinput事件，绑定value属性

 

<script>

export default{

/*

　　　props:{

　　　　　value:{

　　　　　　　　type:[String, Number] //限制输入属性

　　　　　　　　default:' '　//默认属性　　　

}　　　　

}

*/

　　data(){

　　　　　　value:'', //接收任何参数

},methods:{

　　handleInput(event){

　　　　const value = event.target.value

　　　　this.$emit('input', value) //发送参数　　

　　}

}

 

}

</script>

方法一：

父页面接收参数

首先 import 引入 子组件

定义组件别名，components：['xxxx': 子组件]

view： <xxxx @input='handleInput' :value= 'inputValue'/>

{{inputValue}} //显示子组件的输入

 

定义 inputValue = ''

接收事件：

handleinput(event){

　　this.inputValue = event

}

方法二：

父页面接收子组件参数

首先 import 引入子组件

定义组件别名，components：['xxxx':子组件]

view: <xxxx @v-model = 'inputValue'/>

{{inputValue}} //显示子组件的输入

定义 inputValue = ''

//这样写不用写 接收参数的方法，直接双向绑定子组件的数据

（二）兄弟组件传值

父组件

<VAInput @input="handleInput"/>  

handleInput(val){

      this.inputValue = val

    }

<VAShow :content="inputValue"/>

 

Input 子组件

<input @input="handleInput" :value="value"/>

 

show 子组件

<p>A:Show:{{content}}</p>

 

input子组件传递到 show子组件

 

首先 父组件 接收 子组件input传递过来的值，修改this.inputValue,然后将 inputValue 与content数据绑定传递给show子组件，show子组件通过{{content}}动态显示组件content数值。

（三） 非兄弟组件传值 | 简单场景传值。

首先引入一个空的vue实例

创建一个 VueEvent.js文件
import Vue from 'vue'

var VueEvent = new Vue()

export default VueEvent; //暴露VueEvent

在第一个组件中，加载VueEvent.js文件，并将数据添加到广播中

methods: {

    handleClick(){

      VueEvent.$emit('on', this.msg)

    }

  },

在第二个组件中，加载VueEvent.js文件,页面生成 生命周期函数里面，接收广播数据,

mounted() {

    VueEvent.$on('on', (data) =>{

      this.message = data

    })

  },