export pan return 節點 import exp child eem default

/* 父組件給子組件傳值

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);
              })
          }
  
      }

Vue 父子傳值