vue之父子组件传参
2019-02-25 本文已影响0人
郭先生_515
- 父组件向子组件传值：
步骤：
在子组件中创建一个props属性，用以接收父组件传过来的值；
父组件中注册子组件；
在子组件标签中添加子组件props中创建的属性；
把需要传给子组件的值赋给该属性。
按照以上步骤，用代码实现效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父组件向子组件传参</title>
<script src="https://cdn.bootcss.com/vue/1.0.21/vue.min.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="parent">
父组件数据：{{msg}} <br />
子组件获取到的父组件数据：<child :msg="msg"></child> <!-- ②③④ -->
</template>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
parent: {
data() {
return {
msg: 'parent-data'
}
},
methods: {
},
template: '#parent',
components: {
child: {
data() {
return {
}
},
methods: {
},
props: ['msg'], // ①
template: '<span>{{msg}}</span>'
}
}
}
}
})
</script>
</html>
（注：此文引入的 vue.js ，仅适用于vue的1.0版本，对于vue的高版本不支持。）
- 子组件向父组件传值：
步骤：
子组件中需要以某种方式例如点击事件的方法来触发一个事件；
将需要传的值作为emit方法的第二个参数（第一个参数为方法名），通过子组件的事件，将参数发射出来；
在父组件中注册子组件，并通过emit的第一个参数的方法名作为事件，然后用父组件的方法的来获取参数。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/1.0.21/vue.min.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="parent">
父组件获取到的数据：{{msg}}
<child @emit="get"></child> <!-- ③ -->
</template>
<template id="child">
<div>{{msg}}</div>
<input type="button" value="发射" @click="send" name=""> <!-- ① -->
</template>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
parent: {
data() {
return {
msg: ''
}
},
methods: {
get(msg) {
this.msg = msg
}
},
template: '#parent',
components: {
child: {
data() {
return {
msg: 'child_data'
}
},
methods: {
send() { // ②
this.$emit('emit', this.msg)
// 第一个参数：方法名 第二个参数：需要传给父组件的值
}
},
template: '#child'
}
}
}
}
})
</script>
</html>
希望此文，对你学习vue有所帮助！
