vue2.0 父组件和子组件之间的传值

vue

父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息

Demo效果展示

 父组件

<template>

<div class="father">

<h1>我是父组件</h1>

<!-- :message 是 v-bind:message 的简写-->

<[email protected] 是 v-on:messageToFather 的简写 -->

<child :message="MsgToChild" @messageToFather="msgFromChild"></child>

</div>

</template>

<script>

// 引入Child子组件

import child from './child'

export default {

// 注册Child子组件

components: { child },

name: 'father',

data () {

return {

MsgToChild: '父组件传给子组件'

}

},

mounted () {

},

methods: {

// 获取到子组件传给父组件的函数

msgFromChild (data) {

// data就是子组件传给父组件的值

console.log('打印出子组件传给父组件的值=>', data)

}

}

}

</script>

<style lang="less" scoped>

.father {

h1 {

color: red;

}

}

</style>

 子组件

<template>

<div class="child">

<h1>我是子组件(粉色区域是子组件的区域)</h1>

<!-- 获取到获取到父组件传给子组件的message,显示在页面上-->

<p>我是 => {{message}}</p>

<[email protected] 是 v-on:click 的简写 -->

<button @click="btn">点击</button>

</div>

</template>

<script>

export default {

name: 'child',

// 创建props,然后创建一个名为message的属性,来接收父组件传过来的值

props: ['message'],

data () {

return {

MsgToFather: '子组件传给父组件'

}

},

mounted () {

// 获取到父组件传给子组件的message

console.log('打印出父组件传给子组件的值=>', this.message)

},

methods: {

// 点击按钮使用 $emit() 方法去传值给父组件

btn () {

// 'messageToFather' 是 传给父组件的方法, '子组件传给父组件' → 是传给父组件的值

this.$emit('messageToFather', this.MsgToFather)

}

}

}

</script>

<style lang="less" scoped>

.child {

background-color: pink;

h1 {

color: blue;

}

p {

color: green;

font-size: 30px;

}

}

</style>

以上是 vue2.0 父组件和子组件之间的传值 的全部内容, 来源链接: utcz.com/z/377363.html

回到顶部