组件引用

父组件

<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"//给父级写一个数据,传到子级去
        }

      }
    }
</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>

子级向父级传递数据

子级向父级传递数据，用自定义事件。给父级先定义一个自定义事件，事件值是一个方法，方法值可以随起，去子级触发事件，用$iemt（）第一个参数写要去触发父级自定义事件，第二个写要传的数据，传给父级自定义事件myevent

子级页面

<template>
    <div>
      <h1>我是子集</h1>
      <button @click="sendData">点击传递数据</button>
    </div>
</template>
<script>
  export default {
    data(){
      return {
        HelloData:"你好，父级，我过来了"
      }
    },//子级写一个要传数据,传到父级
    methods:{
      sendData(){
           this.$emit("myevent",this.HelloData)   //第一个参数写要去触发父级自定义事件，第二个写要传的数据，传给父级自定义事件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.定义一个共享数据的状态(state)

export default {
  //状态
  state:{
    message:"hello vue"
  },
  setStateMessage(str){
    this.state.message = str;
  }  //通过方法形式操作state
}

2.创建一个两个同级组件,把两个组件引入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>

未点击事情之前代码运行结果

未点击前

点击之后，两个非父子级实现了数据共享

点击后