组件引用
父组件
<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>
未点击事情之前代码运行结果
未点击前
点击之后，两个非父子级实现了数据共享
点击后
