react和vue的传值问题

传值问题

React的传值问题

一、   父组件传值到子组件

主要通过react的状态和属性，在父组件中渲染子组件，然后给父组件中渲染的子组件自定义添加属性，利用状态的设置，把父组件的数据赋给子组件的属性，当做子组件的属性值，接着在子组件中通过props获取属性的属性值，实现父组件数据流向子组件。

二、   子组件传值到父组件

主要通过react的状态和属性，在父组件中渲染子组件，然后给父组件中渲染的子组件自定义添加属性，属性值是一个函数，函数的形参即为子组件传递的数据，在子组件中，通过获取属性的属性值（属性值即为函数，给函数传递一个实参—即子组件的数据），实现子组件数据流向父组件。

Vue的传值问题

一、父组件－－子组件传值

      主要通过props属性

      Template 标签内   给子组件设置属性  

<!--父亲组件给子组件传数据-->

<v-nav :msg=“msg” :n=“name”></v-nav>

在子组件的components设置 

 props:[‘msg’,‘n’],  /*子组件接收数据*/

子组件的template内通过｛｛｝｝直接绑定数据即可

二、子组件－－父组件传值

主要通过$emit推送事件

<v-child @to-parent="getData"></v-child>

this.$emit('to-parent',this.ipt)

getData(msg){

           //msg==this.ipt 子组件

               this.str=msg

         }

三、   非父子组件之间传值

空vue对象  $emit(‘ ’,数据) 发送   $on 接收

父组件操作子组件---$refs          $parent 子组件操作父组件数据

使用$refs获取dom    在mounted函数中

/*nextTick里面的代码会在DOM更新后执行*/---mounted函数中执行

$nextTick this.$nextTick(function(){     })

使用slot发布内容

Slot标签添加属性 <slotname="ul-slot">内容可通过slot属性值查找是否显示默认<ul slot="ul-slot">