vue组件传值

父组件传值给子组件

父组件向子组件传值用的是props，

1.定义父组件

• 父组件想要向子组件传值时，那么需要在子组件引入的地方绑定一个属性，属性值就是要传的数据，并且要在父组件中引入子组件。
• 这个自定义属性的属性值是用来存放父组件向子组件传递的数据。
• 在这里，name即是要传的数据，需要在data定义，所以当传递的数据时字符串类型时，可以在data定义为 name:''

父组件：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

2.定义子组件

• 子组件使用props属性接收父组件传递过来的值。

 props:{
	父组件自定义的属性：该值的类型，
	required:true
 }

所以这里写：

 props: {
      inputName: String,
      required: true
    }

• 然后可以直接在页面上以这个形式“{{}}”引用

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

子组件向父组件传值（自定义事件）

第一种方式: 通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用v-on或@ 结合student.vue中的sendStudentName 的emit。 如果只能点击一次则

App.vue:

<template>
  <div id="app">
  <student v-on:studentName="getStudentName"></student>

    <!-- 点击 把学生名给App按钮 namestudent就会显示  -->
    <h2>获取到的student中的name:{{namestudent}}</h2>
  </div>
</template>

<script>
import student from './components/study/student.vue'
export default {
  name: 'App',
  components:{
    student
  },
  data(){
    return{
      namestudent:'',          
    }
  },
  //methods里面方法可以随意调用不用在div中必须存在方法名
  methods:{
    //下面两个方法一样的用哪个都行
    // getStudentName(name,x,y){
    //    console.log("App收到学生名是:",name,x,y);
    // }
    
    //...params （es6写法）  代表除name外 其他输出成一个数组
    getStudentName(name,...params){
       console.log("App收到学生名是:",name,params);
       this.namestudent = name;
       //输出  App收到学生名是: lj (2) [666, 999]
    }
  }
}
</script>

 传输多个自定义事件:

 <student v-on:studentName="getStudentName"  v-on:studentName1="getStudentName1"></student> 

student.vue:

<template>
    <div class="stu">
      <button @click="sendStudentName">把学生名给App</button>
    </div> 
</template>
  
  <!--组件数据交互-->
  <script>
    //这样写法更加简洁，这样用的多
    export default {
          //代表组件名称，最好与 school.vue中的school一致
          name:'student',
          data(){
              return{}
          },
          methods:{
            sendStudentName(){
              //<student v-on:studentName="getStudentName"></student> studentName和 ‘studentName’ 同一个
              this.$emit('studentName',this.name,666,999);
           }
     }
   }
 }
  </script>

第二种方式：通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用ref和mounted 结合student.vue中的sendStudentName 的emit

APP.vue:

<template>
  <div id="app">
    <!--其实比1麻烦点，但是易于扩展，比如还可以加定时器-->
    <student ref="student"></student>

    <!-- 点击 把学生名给App按钮 namestudent就会显示  -->
    <h2>获取到的student中的name:{{namestudent}}</h2>
  </div>
</template>

<script>
import student from './components/study/student.vue'
export default {
  name: 'App',
  components:{
    student
  },
  data(){
    return{
      namestudent:'',          
    }
  },
  //methods里面方法可以随意调用不用在div中必须存在方法名
  methods:{
    //...params （es6写法）  代表除name外 其他输出成一个数组
    getStudentName(name,...params){
       console.log("App收到学生名是:",name,params);
       this.namestudent = name;
       //输出  App收到学生名是: lj (2) [666, 999]
    }
  },
  mounted(){
   setTimeout(()=>{
    //App.vue中this.$emit('studentName',this.name);中studentName 和下面studentName一样
    //getStudentName 是methods中的getStudentName
    this.$refs.student.$on('studentName',this.getStudentName)
    
    //上面的替代。把methods里面getStudentName方法去掉。  =>函数 是没有自己的this的所以得往外找就是App的区域了那this就是App
    // this.$refs.student.$on('studentName',(name,...params)=>{
    //   //=>{} 里面写this就是App的
    //   console.log("App收到学生名是:",name,params);
    //    //输出  App收到学生名是: lj (2) [666, 999]
    // })
   },3000)
  }
}
</script>

 student.vue：

<template>
    <div class="stu">
      <button @click="sendStudentName">把学生名给App</button>
    </div> 
</template>
  
  <!--组件数据交互-->
  <script>
    //这样写法更加简洁，这样用的多
    export default {
          //代表组件名称，最好与 school.vue中的school一致
          name:'student',
          data(){
              return{}
          },
          methods:{
            sendStudentName(){
              //<student v-on:studentName="getStudentName"></student> studentName和 ‘studentName’ 同一个
              this.$emit('studentName',this.name,666,999);
           }
     }
   }
 }
  </script>

注意：

• 如果组件里面写了@click这种dom的操作事件，组件会认为这是个自定义事件。所以要想为组件中的dom操作事件，只需要 @click.native加个native即可。
• this.$refs.student 这里this指的是student组件并不是App,student触发则this就是student。如果是this.getStudentName getStudentName是App.vue method里面方法则这个里this就是App。如果mounted里面写的是普通function方法则这里this也是App。
• 只触发一次则this.$refs.student.$once('studentName',this.getStudentName)再点击没反应。