組件引用

父組件

<template>
  <div>
  <Carts></Carts>
    
  </div>
</template>

<script>
  import Carts from "../components/Carts";//引用組件
    export default {
        components:{Carts}//注冊組件
    }
</script>

<style scoped>

</style>

子組件

<template>
  <div>
    <h1>購物車</h1>
  </div>

</template>

<script>
    export default {
        name: "Carts"
    }
</script>

<style scoped>

</style>

引入子組件運行結果

父級向子級傳遞數據

父級頁面。父級向子級傳遞數據：使用屬性傳遞，給子級標簽加一個屬性，屬性名可以自己定義，屬性必須用指令綁定(綁定message屬性傳遞給MenuList)

<template>
  <div>
    <p></p>
    <MenuList :CD="message"></MenuList>
  </div>
</template>

<script>
  //父級向子級傳遞數據：使用屬性傳遞，給子級標簽加一個屬性，屬性名可以自己定義，屬性必須用指令綁定(綁定message屬性傳遞給MenuList)

  import MenuList from "../components/MenuList";
    export default {
      components: {MenuList},
      data(){
        return{
          message:"hello world"http://給父級寫一個數據,傳到子級去
        }

      }
    }
</script>

<style scoped>

</style>

子級頁面。MenuList子集獲取方法props，表示在選項對象里寫一個屬性的屬性，里面是一個組件字符串寫傳過來的屬性名，然后綁定表達式見獲取

<template>
    <div>
      <h1>我是子集</h1>
      <h1>{{CD}}</h1>
    </div>
</template>
<script>
  export default {
    props:["CD"]//MenuList獲取方法，表示在選項對象里寫一個屬性的屬性，里面是一個組件字符串寫傳過來的屬性名，然后綁定表達式見獲取
  }

</script>

<style scoped>

</style>

子級向父級傳遞數據

子級向父級傳遞數據，用自定義事件。給父級先定義一個自定義事件，事件值是一個方法，方法值可以隨起，去子級觸發(fā)事件，用$iemt（）第一個參數寫要去觸發(fā)父級自定義事件，第二個寫要傳的數據，傳給父級自定義事件myevent

子級頁面

<template>
    <div>
      <h1>我是子集</h1>
      <button @click="sendData">點擊傳遞數據</button>
    </div>
</template>
<script>
  export default {
    data(){
      return {
        HelloData:"你好，父級，我過來了"
      }
    },//子級寫一個要傳數據,傳到父級
    methods:{
      sendData(){
           this.$emit("myevent",this.HelloData)   //第一個參數寫要去觸發(fā)父級自定義事件，第二個寫要傳的數據，傳給父級自定義事件myevent
      }
    }
  }
</script>

<style scoped>

</style>

父級頁面，//傳過來之后myevent調用的是means,所以在里面寫上獲取到的子級數據HellodData，然后父級的值賦值給傳過來的數據

<template>
  <div>
    <h1>{{childData}}</h1>
    <MenuList @myevent="means"></MenuList>
  </div>
</template>

<script>
  import MenuList from "../components/MenuList";
    export default {
      components: {MenuList},
      data(){
        return{
          childData:""
        }
      },
      methods:{
        means(HelloData){  //傳過來之后myevent調用的是means,所以在里面寫上獲取到的子級數據HellodData
          this.childData = HelloData  //父級的值賦值給傳過來的數據

        }

      }
    }
</script>

<style scoped>

</style>

非父子級傳遞數據

1.定義一個共享數據的狀態(tài)(state)

export default {
  //狀態(tài)
  state:{
    message:"hello vue"
  },
  setStateMessage(str){
    this.state.message = str;
  }  //通過方法形式操作state
}

2.創(chuàng)建一個兩個同級組件,把兩個組件引入App.vue文件里，然后把共享的數據分別引入到兩個組件里，再后定義其中任意一個子組件，定義一個改變數據事件。這樣子完成了非父子組件之間的傳值

<template>
  <div>
    <Sister></Sister>
    <Borther></Borther>

  </div>

</template>

<script>
  import Sister from "../components/Sister";
  import Borther from "../components/Borther"; //引入兩個組件
  export default {
    components:{Sister,Borther},

  };
</script>

<style scoped>

</style>

兩個子組件的配置如下

<template>
  <div>
    <h1>Good morning</h1>
    <p>{{hello.message}}</p>
  </div>

</template>

<script>
  import store from "../store";
  export default {
    data(){
      return{
        hello:store.state
      }
    }

  }
</script>

<style scoped>

</style>

<template>
  <div>
    <h1>hello world</h1>
    <button @click="changeData">改變數據</button>
    <p>{{body.message}}</p>
  </div>
</template>
<script>
  import store from "../store";
    export default {
      data(){
        return{
          body:store.state
        }
      },
      methods:{
        changeData(){
          store.setStateMessage("The data has change")//調用store方法改變數據
        }
      }
    }
</script>
<style scoped>

</style>

未點擊事情之前代碼運行結果

未點擊前

點擊之后，兩個非父子級實現了數據共享

點擊后