vue中父子组件传值

通俗易懂，一个demo即可搞定奥～

vue-cli创建项目目录，先创建一个父组件father.vue,再来个子组件child.vue,名字就大众些。。

🌰  父传子  通过props

第一步：用import引入子组件

第二步：在components中注入子组件

第三步：在子组件中用props方法接收父组件传来的值

父组件代码：

<style>

</style>

<template>

<div>

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

<br>

<hr>

<!-- 引入子组件 -->

<child :tochild="tochild"></child>

</div>

</template>

<script>

import child from './child'

export default {

data () {

return {

tochild: '子组件你好呀，这是父组件传给你的内容'

}

},

// 实例子组件

components: {

child

}

}

</script>

 

子组件代码：

<style>

</style>

<template>

<div>

<h2>我是子组件</h2>

接父组件传来的内容:{{tochild}}

<br>

</div>

</template>

<script>

export default {

// props: ['tochild'],

// 第二种写法

props: {

tochild: {

type: String,

default: ''

}

},

data () {

return {

}

}

}

</script>

效果图：

 

 

🌰  子传父  通过$emit("方法名","传递给父组件的参数/数据")

第一步：在子组件中创建一个按钮，定一个点击事件（点击事件中用$emit()触发自定义事件，并传递一个参数/数据）

第二步：父组件中的子组件标签中监听该自定义事件并添加一个响应该事件的处理方法，将接受的数据展示

父组件代码：

<style>

</style>

<template>

<div>

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

<br>

<!-- 接受子组件传来的值 -->

{{bysonmsg}}

<br>

<hr>

<!-- 引入子组件 -->

<child :tochild="tochild" @tofather="byson"></child>

</div>

</template>

<script>

import child from './child'

export default {

data () {

return {

tochild: '子组件你好，这是父组件传给你的内容',

bysonmsg: ''

}

},

// 实例子组件

components: {

child

},

methods: {

byson (data) {

this.bysonmsg = data

}

}

}

</script>

 

子组件代码：

<style>

</style>

<template>

<div>

<h2>我是子组件</h2>

接父组件传来的内容:{{tochild}}

<br>

<br>

<button @click="tofather">点击，子给父组件的内容</button>

</div>

</template>

<script>

export default {

//第一种写法

// props: ['tochild'],

// 第二种写法

props: {

tochild: {

type: String,

default: ''

}

},

data () {

return {

}

},

methods: {

tofather () {

this.$emit('tofather', '这是子组件传给父组件的内容')

}

}

}

</script>

效果图：