vue 组件的简单学习(2)--子组件向父组件传值
上篇文章中学了 简单的展示vue子组件,那么子组件中的值如何传递到父组件中呢
1 背景表述:此时你已经写了一个子组件 子组件内容很简单只有一个button按钮。
在父组件中引用了子组件,则在父组件中展示出了这个按钮。
当我在父组件页面,点击这个按钮时,我想要把子组件中的变量name的值传到父组件中。
请看以下子组件代码
<template> <div id="users"> <button @click="change">change</button> </div> </template> <script> export default { name:'users', data() { return { name:"子 to 父" }; }, methods:{ change:function(){ this.$emit("chuan",this.name); } } } </script> <style> </style>
以上代码中:
当我点击 button 按钮时,会触发事件调用change方法。
在change方法中this.$emit("chuan",this.name); 注册了一个方法chuan(名字随意起),带一个参数name。
接下来看父组件代码
<template> <div class="hello1"> <users v-on:chuan="come($event)"></users> </div> </template> <script> export default { name: 'HelloWorld', methods:{ come:function(value){ } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
以上代码中
<users v-on:chuan="come($event)"></users>
引用子组件,绑定的方法chuan (在刚刚子组件中注册的名字)
chuan 调用come方法,所以在方法中写个com方法。
这样子组件中的name值,就传到了父组件的come方法(value)中。