(4)vue组件传值

1.组件之间的关系

1. 父级向子级传递数据
2. 子级向父级传递数据
3. 非父子级传递数据

1.1父级向子级传递数据和子级向父级传递数据

本节主要用到上面三个文件
App.vue的代码

<template>
  <div>
    <h1>{{childData}}h1>
    <Child @myevent="changeData" :msg="message">Child>
  div>
template>

<script>
// 父级向子级传递数据:使用属性传递
import Child from "./components/Child"
export default {
  components:{Child},
  data() {
    return {
      message:"app.vue data",
      childData:""
    }
  },
  methods:{
    changeData(childData){
      this.childData = childData
    }
  }
}
script>

<style>

style>

Child.vue代码如下

<template >
    <div>
        <h1>你好啊{{msg}}h1>
        
        <button @click="sendData">传递数据button>
    div>
template>

<script>
// 子级向父级传递数据:使用属性传递

export default{
    props:["msg"],  //得到父级传过来的数据
    data() {
        return {
            childData:"I'm child"
        }
    },
    methods:{
        sendData(){
            // #emit会找到父级自定义的事件
            this.$emit("myevent",this.childData) 
        }
    }
}
script>

运行结果

1.2综合应用(父子之间相互之间传递的例子)

• 本节主要用到的三个文件如下图所示

app.vue文件

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

<script>
//app里面一般不会写数据
import Carts from "./components/Carts.vue" //.vue写不写都可以
                                          //carts购物车

export default {
  components:{Carts},
 
}
script>

<style>

style>

Carts.vue文件

<template>
    <div>
        <h1>购物车h1>
        <ul>
            <li v-for="(v,i) of fruits" :key="i">
                {{v.name}}
                单价:{{v.price}}
                <Counter 
                 :qu="v.qu"  
                 :index="i"
                 @add="add"
                 @sub="sub"    
                >Counter>
            li>
        ul>
    div>
template>

<script>

import Counter from "./Counter"

export default {
    components:{Counter},
     data() {
    return {
      fruits:[
        {name:"苹果",price:3.14,qu:0},
        {name:"香蕉",price:2.14,qu:0},
        {name:"梨子",price:1.23,qu:0}
      ]
    }
  },
  methods:{
      add(index){
          this.fruits[index].qu++
      },
      sub(index){
          if(this.fruits[index].qu>0){
             this.fruits[index].qu-- 
          }
      }
  }
}
script>

Counter.vue文件

<template>
    <span>
        <button @click="sub">-button>
        <span>{{qu}}span>
        <button @click="add">+button>
    span>
template>

<script>
export default {
    props:["qu","index"],
    methods:{
        sub(){
            this.$emit("sub",this.index)
        },
        add(){
            this.$emit("add",this.index)
        }
    }
}
script>

运行结果

1.3同级的传递数据

这节共有四个文件
App.vue

<template>
  <div>
    <Bother>Bother>
    <Sister>Sister>
  div>
template>

<script>
import Bother from "./components/Bother"
import Sister from "./components/Sister"
export default {
 components:{Bother,Sister}
}
script>

<style>

style>

bother.vue

<template>
    <div>
        <h1>bother <button @click="changeData">改变数据button>h1>
        <p>{{state.message}}p>
        
    div>
template>

<script>
import store from "../store"
export default {
    data(){
        return{
            state:store.state
        }
    },
    methods:{
        changeData(){
            store.setStateMessage("bother data")
        }
    }
}
script>

Sisiter.vue

<template>
    <div>
        <h1>sisterh1>
        <p>{{state.message}}p>
    div>
template>

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

点击之前

点击之后

注意点

关闭语法检查