1.传值方式
(1)父组件->子组件:通过给子组件绑定属性的形式来传递父组件中的数据;
(2)子组件->父组件:通过给子组件设置绑定事件的机制来给父组件传递子组件的数据。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id ="app">
<!--通过事件绑定的机制来给父组件传递子组件的数据-->
<!--通过给子组件绑定属性的形式来传递父组件的数据-->
<com1 v-bind:parentmsg="msg" @func="getMsgFromSon"></com1>
</div>
<template id="tmp1">
<div>
<h1>这是子元素 --- {{ parentmsg }}</h1>
<input type="button" value="向父组件传递消息" @click="sendMsg">
</div>
</template>
<script>
var com1 = {
template: '#tmp1',
data() {
return {
msg: '这是子组件中的数据',
msgFromSon: ''
}
},
props: ['parentmsg'],
methods: {
sendMsg() {
this.$emit('func', this.msg);
}
}
}
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的数据'
},
methods: {
getMsgFromSon(data) {
this.msgFromSon = data
console.log(this.msgFromSon)
}
},
components: {
com1
}
});
</script>
</body>
</html>
3.执行结果