利用 props 传值时,当 传递的种类不同时,效果也是不同的
当传的是 引用 类型时,不管是在 父组件 中改变了这个值,还是在 子组件 中改变了这个值,父组件和子组件中的值,互相影响
而传的是 传值 类型时 ,不管是在 父组件 中改变了这个值,还是在 子组件 中改变了这个值,父组件和子组件中的值都不会随之而改变,都不会互相影响
父组件 传值给 子组件(props属性传值)
第一种方法
App.vue为父组件
要想传值给子组件,父组件就要寻找与之有连接交流的子组件,并通过绑定属性来传值
//App.vue
<template>
//通过 v-bind 为子组件绑定属性并附上我们要传递的值
<appHeader v-bind:infos="info"></appHeader>
</template>
//引入子组件
import Header from './components/Header'
export default {
name: 'App',
data(){
return{
info:"我是父组件的值"
}
},
components: {
appHeader:Header
}
}
Header.vue为子组件
父组件传值过来,子组件就要接收,通过 props 来接收,就可以引用使用了
可以这样写
props:['infos']
但这样是不提倡不规范的可以按照下面的方法来编写
//Header.vue
export default {
name: "Header",
props:{
infos:{ //父组件绑定的属性名
type:String , //值的类型
required:true //是否符合规定
}
},
created(){
console.log(this.infos); //输出父组件传过来的值
}
}
第二种方法
在父组件(App.vue)中定义好需要传递的值,并且为需要接收值的子组件添加“连接属性”
infos 是自己定义的属性名,用作传递的桥梁
fu_info 是父组件需要传递给子组件的值
appHeader 是子组件
//App.vue
<template>
<appHeader v-bind:infos="fu_info"></appHeader>
</template>
export default {
name: 'App',
data(){
return{
fu_info:"我是父组件的值"
}
},
components: {
appHeader:Header
}
}
父组件传递了值,子组件就要接收,子组件通过 props 来接收传递过来的属性
<button class="btn btn-info">{{ infos }}</button> //显示父组件传递过来的值
export default {
name: "Header",
props:{
infos:{ //infos 父组件文件中为子组件定义的传值属性名
type:String,
required:true,
default:"我是默认值"
}
}
}
按钮中会显示 我是父组件的值,这样就完成了传值
子组件 传值给 父组件(事件传值)
Header.vue为子组件
子组件 想要通过事件传值给 父组件, 先定义一个事件,作为开始传值的开始事件,我这里一点击事件为例
this.$emit("chuan",this.info);,相当于定义了一个自定义 chuan 事件,this.info则是触发事件函数的参数
//点击触发 chuanzhi()方法
<button class="btn btn-info" v-on:click="chuanzhi">事件传值</button>
export default {
name: "Header",
data(){
return{
info:"我是子组件中的值" //传递给父组件的值
}
},
methods:{
chuanzhi:function(){
this.$emit("chuan",this.info); //将值放在自定义的事件函数中作为参数
}
}
}
App.vue为父组件
找到子组建在父组件中的组件,并为它附上自定义事件
v-on:chuan="chuanginfor($event)
chuan : 即使父组件中定义的 自定义事件
chuanginfor($event) :此方法中的 $event 是名字固定的,它的值就是父组件中this.$emit("chuan",this.info);的this.info
//子组件
<appHeader v-on:chuan="chuanginfor($event)"></appHeader>
import Header from './components/Header'
export default {
name: 'App',
data(){
return{
fu_info:""
}
},
methods:{
chuanginfor:function(event){
this.fu_info=event
console.log(this.fu_info);
}
},
components: {
appHeader:Header
}
}
如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题
ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈