vue-父子组件传值
父组件传给子组件:子组件通过props方法接收数据
子组件传给父组件:通过$emit方法传递参数
一、props方法:
1.静态传值:
父组件中子组件的标签设置一个自定义属性并赋值:
<component message="hello"></component>
子组件中通过props方法接收
export default { props:['message'] }
可以显示到页面上
<template> <div> <p>{{message}}</p> </div> </template>
2.动态传值:(根据父组件中值的变化,动态改变子组件中的值)
父组件中属性双向绑定:
<template> <div> <input type="text" v-model="hello"> <keep-alive> <component :message="hello"></component> </keep-alive> </div> </template> <script> export default{ data(){ return { hello:"hello"//初始值 } } </script>
子组件不变;
二、通过ref实现页面间的通信
1.静态传值
父组件中设置ref属性和getMessage方法:
<template> <div> <keep-alive> <component ref="msg"></component> </keep-alive> </div> </template> <script> export default{ mounted:function () { console.log(this.$refs.msg); this.$refs.msg.getMessage('我是子组件一!') } } </script>
子组件通过getMessage方法显示在页面中:
<template> <div> <p>{{message}}</p> </div> </template> <script> export default { data(){ return{ message:'' } }, methods:{ getMessage(m){ this.message=m; } } } </script>
prop和ref之间的区别:
- prop着重于数据的传递,他不能调用子组件里的数据和方法,想创建文章组件时,自定义标题和内容这样的使用场景最适合prop;
- ref着重于索引,主要用来调用子组件里的数据和方法,其实比并擅长数据的传递,而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。
2.父组件调用子组件的属性和方法
子组件中的属性与方法:
<template> <div> <p>{{message}}</p> </div> </template> <script> export default { data(){ return{ message:'aaaaa' } }, methods:{ fun(){ console.log(this.message) console.log("调用了组件1的方法") } } } </script>
父组件中调用:
<template> <div> <keep-alive> <component ref="msg"></component> </keep-alive> </div> </template> <script> import simple1 from "./simple1.vue"; export default{ data(){ return { } }, methods: { handleClick(){ this.$refs.msg.fun();//调用子组件的方法 console.log(this.$refs.msg.message)//获取子组件的属性 } }, components: { simple1 }, mounted () { this.handleClick(); } } </script>
三、$emit方法实现通信
$emit(event,arg)
event为绑定的一个自定义事件,当他执行的时候将他的参数arg传递给父组件,父组件通过@event事件监听并接收参数。
1.静态传值
在子组件中:
template> <div> 这是子组件 </div> </template> <script> export default { data(){ return{ } }, mounted () { this.$emit('getFun','这里是要传的参数') } } </script>
在父组件中:
<template> <div> <p>{{title}}</p> <keep-alive> <component @getFun="showMsg"></component> </keep-alive> </div> </template> <script> import simple1 from "./simple1.vue"; export default{ data(){ return { title:'' } }, methods: { showMsg(title){ this.title=title; } }, components: { simple1 } } </script>
2.动态传值
子组件中:
<template> <div> 这是子组件 <input type="text" v-model="arg"> <button @click="fun">传值</button> </div> </template> <script> export default { data(){ return{ arg:'' } }, methods:{ fun(){ this.$emit('getFun',this.arg) } } } </script>
父组件不变;
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递;
但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度。
Vue 的状态管理工具 Vuex 完美的解决了这个问题。
原文:cnblogs.com/hlyin/p/10608660.html