Vue 父子传值

Posted 2020-12-30 jinly

/*

父组件给子组件传值

 

1.父组件调用子组件的时候 绑定动态属性

<v-header :title="title"></v-header>

 

2、在子组件里面通过 props接收父组件传过来的数据

props:[‘title‘]

 

props:{

 

‘title‘:String

}

 

3.直接在子组件里面使用

父组件主动获取子组件的数据和方法：

 

1.调用子组件的时候定义一个ref

 

<v-header ref="header"></v-header>

 

2.在父组件里面通过

 

this.$refs.header.属性

 

this.$refs.header.方法

子组件主动获取父组件的数据和方法：

this.$parent.数据

 

this.$parent.方法

*/

在子组件中代码：

<template>
    <div>  
        <h2>我是头部组件</h2>
          <button @click="getParentData()">获取子组件的数据和方法</button>
    </div>
</template>
<script>
    
export default{
    data(){
        return{
            msg:‘子组件的msg‘
        }
    },
    methods:{
       
            run(){

                alert(‘我是子组件的run方法‘)
            },
            getParentData(){
                /*
                子组件主动获取父组件的数据和方法：  


                this.$parent.数据

                this.$parent.方法

                
                */
                // alert(this.$parent.msg);

                //this.$parent.run();
            }
    }
    
}

</script>

在父组件中：

• <template>
      <!-- 所有的内容要被根节点包含起来 -->
      <div id="home">
      
          <v-header ref="header"></v-header>
  
          <hr>
           首页组件   
  
           <button @click="getChildData()">获取子组件的数据和方法</button>
  
      </div>
  
  </template>
  
  
  <script>
  
  
  /*
  父组件给子组件传值
  
      1.父组件调用子组件的时候 绑定动态属性
          <v-header :title="title"></v-header>
  
      2、在子组件里面通过 props接收父组件传过来的数据
          props:[‘title‘]
  
  
  
          props:{
  
              ‘title‘:String      
          }
  
      3.直接在子组件里面使用
  
  
  
  父组件主动获取子组件的数据和方法：
  
      1.调用子组件的时候定义一个ref
  
          <v-header ref="header"></v-header>
  
      2.在父组件里面通过
  
          this.$refs.header.属性
  
          this.$refs.header.方法
  
  
  
  
  
  子组件主动获取父组件的数据和方法：  
  
  
          this.$parent.数据
  
          this.$parent.方法
  
  
  
  */
  
      import Header from ‘./Header.vue‘;
  
      export default{
          data(){
              return {               
                 msg:‘我是一个home组件‘,
                 title:‘首页111‘
              }
          },
          components:{
  
              ‘v-header‘:Header
          },
          methods:{
  
              run(){
  
                  alert(‘我是Home组件的run方法‘);
              },
              getChildData(){
  
                  //父组件主动获取子组件的数据和方法：
                  // alert(this.$refs.header.msg);
  
                  this.$refs.header.run();
              }
          }
  
  
      }
  
  </script>

   兄弟之间传值

• /*非父子组件传值
  1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例
  
  
  
  2、在要广播的地方引入刚才定义的实例
  
  
  
  3、通过 VueEmit.$emit(‘名称‘,‘数据‘)
  
  
  
  4、在接收收数据的地方通过 $om接收广播的数据
  VueEmit.$on(‘名称‘,function(){
  
  
  
  })
  
  
   
  */
  新建一个js ,比如：vueEvent.js

  import Vue from ‘vue‘;
  
  var VueEvent = new Vue()
  
  export default VueEvent;

  在组件中使用：

   <button @click="emitHome()">给Home组件广播数据</button>
  
  <script>
  //引入 vue实例
      import VueEvent from ‘../model/VueEvent.js‘;
  
      export default{
          data(){
              return {               
                 msg:‘我是一个新闻组件‘              
              }
          },
          methods:{
              emitHome(){ 
  
                  //广播
  
                  VueEvent.$emit(‘to-home‘,this.msg)
              }
  
          },
          mounted(){
  
              VueEvent.$on(‘to-news‘,function(data){
                  console.log(data);
              })
          }
  
      }
  
  </script>

  在另外一个组件中使用：

  <button @click="emitNews()">给News组件广播数据</button>
  
   import VueEvent from ‘../model/VueEvent.js‘;
  
      export default{
          data(){
              return {               
                 msg:‘我是一个home组件‘,
                 title:‘首页111‘
              }
          },methods:{
  
              emitNews(){
                  //广播数据
  
                  VueEvent.$emit(‘to-news‘,this.msg)
  
              }
          },
          mounted(){
  
              //监听news 广播的数据
              VueEvent.$on(‘to-home‘,function(data){
                  console.log(data);
              })
          }
  
      }