vue中父子组件的相互传递

子组件从父组件那获取数据
在子组件中， 把他想要从父组件那得到的数据写在props中
在父组件中， 调用子组件像这样 <xxx :m='message'></xxx>
父组件从子组件那获取数据
在子组件中，触发函数调用this.$emit('事件名', 传递的数据)

在父组件中， 在调用子组件时  <xxx @事件名='getVal'></xxx>  注：getVal(val){this.val=val} 为method内一函数

实例如下：

实现功能介绍：点击父组件按钮设置isShow的值，传给子组件，通过判断isShow的值控制子组件是否显示，如果子组件显示则显示父组件传过来的noticeConten的值，子组件提交输入框中输入的数据给父组件显示

父组件：

<template>

<div>

<input class="notice_input" type="text" v-model="noticeContent" placeholder="父 输入框">

<button class="input_btn" @click="refWay">点击显示</button>

<notice-plugin :is-show='isShow'

:notice-content='noticeContent'

@is-show-p='getIsShow'

@son-input-m='getSonM'></notice-plugin>

<div class="show_son" v-if="isShowMe">

子给父的数据：

{{sonMessage}}

</div>

</div>

</template>

< script>

export default{

data () {

return {

noticeContent: '',

isShow: false,

isShowMe: false,

sonMessage: ''

}

},

methods: {

refWay () {

this.isShow = true

},

getIsShow (val) {

this.isShowMe = val // val就是从子组件获取的数据

},

getSonM (val) {

this.sonMessage = val // val就是从子组件获取的数据

}

}

}

</ script>

子组件：

<template>

<div class="notice_box" v-if="isShow">

<div>父给子的数据：{{noticeContent}}</div>

<div>

<input class="notice_input" type="text" v-model="sonInputM" placeholder="子 输入框">

<button class="input_btn" @click="sendToParent">点击显示</button>

</div>

</div>

</template>

< script>

export default {

name: 'notice-plugin',

props: { //存放子组件从父组件获取的数据

isShow: {

type: Boolean,

default: false

},

noticeContent: {

type: String,

default: ''

}

},

data () {

return {

isShowParent: false,

sonInputM: ''

}

},

methods: {

sendToParent () {

this.isShowParent = true

this. $emit( 'is-show-p', this.isShowParent) // 传递数据给父组件

this. $emit( 'son-input-m', this.sonInputM) // 传递数据给父组件

}

}

}

</ script>

运行结构：