vue子组件给父组件传值,即父组件监听子组件($emit)
vue子组件给父组件传值,即父组件监听子组件($emit)
·
1、准备:cdn引入vue框架,画一个页面渲染区域,实例化一个vue并指定渲染区域。
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
</div>
let app = new Vue({
el: "#app",//最大的组件 根组件
data: {
},
})
2、定义一个子组件,引用子组件。
// 自定义一个全局组件
// 第一个参数-组件名称 (名字不能是小驼峰,是小写字母-小写字母)
// 第二个参数-配置
Vue.component("button-component", {
// 状态值:要求状态对应一个组件的实例
data(){
return {
}
},
// 组件的模板:必须要用一个div包括起来
template:`<div>
</div>`,
})
<div id="app">
<!-- 在根组件里使用自定义组件 -->
<button-component></button-component>
</div>
3、在子组件状态值data里面添加要传递的值,并在模板里添加一个按钮绑定点击事件用来触发值传递事件。
data(){
return {
name:"hehe",
}
}
template:`<div>
{{name}}
<button @click="toParent">传值</button>
</div>`
4、在子组件的方法中写子组件模板中按钮绑定的事件内容-即使用$emit方法把值传递给父组件。注意这里的this指的是子组件,传递事件是changenum(自定义名字,不能驼峰命名)。
methods: {
// 子组件通过$emit调用父组件中的方法
// $emit只能在子组件中使用
// 将组件中的count传递到父组件中
toParent() {
// 触发changenum事件,传递count值
this.$emit("changenum",this.name)
}
}
5、在引用子组件标签中添加@changenum="changeInfo"把changenum事件传递出去,changeInfo是父组件中定义来接值的方法。
<button-component @changenum="changeInfo"></button-component>
6、在父组件的状态值中定义一个状态值,并在方法中定义changeInfo方法去处理传递的值。
data: {
appname:''
}
methods: {
// 响应子组件触发的changenum事件
// 参数:分别接受子组件中$emit传递过来的参数
changeInfo(val1){
this.appname=val1;
}
}
7、在父组件中引用状态值appname,运行看效果。
<p>传的名字:{{appName}}</p>
更多推荐
已为社区贡献1条内容
所有评论(0)