vue.js props属性传值与事件传值

 利用 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:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈