父子组件的通信和函数调用

父组件向子组件传递数据

<template>
  <div>
    <!-- 使用子组件并传递数据 -->
    <children :mes="message" :fruitlist="fruit"></children>
  </div>
</template>

<script>
import children from '../components/children/children.vue'   //引入子组件
export default {
  name: 'parent',
  data () {
    return {
      message: '你好',
      fruit: ['苹果','香蕉','橘子','菠萝','桃子'],
    };
  },
  components: {
    children          //注册子组件
  }
}
</script>

<template>
  <div>
    <h2>{{mes}}</h2>
    <h2>{{fruitlist}}</h2>
  </div>
</template>

<script>
export default {
  name: 'children',
  data () {
    return {
    };
  },
  props: {                  //接收父组件传递的值
    mes: String,            //传递的参数名和参数类型
    fruitlist: {
      type: Array,          //类型 
      default: '没有水果',   //默认值：没有传参时显示默认值
      required: true        //是否为必传值
    } 
  }
}
</script>

子组件向父组件传递数据

<template>
  <div>
    <button v-for="item in fruit" :key="item" @click="send(item)">{{item}}</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  data () {
    return {
      fruit: ['苹果','香蕉','橘子','菠萝','桃子'],
    };
  },
  methods: {
    send(item) {
      //子组件发送事件(事件名，传递的参数)
      this.$emit('item-click',item)
    }
  },
}
</script>

<template>
  <div>
    <h2>子组件中点击的按钮：{{fruit}}</h2>
    <children @item-click='get'/>
  </div>
</template>

<script>
import children from '../components/children/children.vue'   //引入子组件
export default {
  name: 'parent',
  data () {
    return {
        fruit: ''
    };
  },
  components: {
    children          //注册子组件
  },
  methods: {
    get(item) {      //父组件定义方法接收子组件传递的参数
      this.fruit = item
    }
  },
}
</script>

父子组件的访问

• 父组件访问子组件：使用$refs/children （不推荐使用children）
• 子组件访问父组件：使用$parent （不建议使用）

<template>
 <div>
   <children ref="cpn"></children>   <!-- ref=" "相当于给子组件取了一个名字，调用时使用这个名字 -->
   <button @click="getfruit">获取子组件的水果列表</button>
   <button @click="getaaa">调用子组件的函数aaa</button>
   <button @click="getbbb">调用子组件的函数bbb</button>
 </div>
</template>

<script>
import children from '../components/children/children.vue'   //引入子组件
export default {
 name: 'parent',
 data () {
   return {
       fruit: ''
   };
 },
 components: {
   children          //注册子组件
 },
 methods: {
   getfruit() {
   //   console.log(this.$children[0].fruit);
     console.log(this.$refs.cpn.fruit);
   },
   getaaa() {
   //   this.$children[0].aaa()
     this.$refs.cpn.aaa()
   },
   getbbb() {
   //   this.$children[0].bbb()
     this.$refs.cpn.bbb()
   }
 },
}
</script>

<template>
  <div>
    <button @click="getccc">调用父组件的函数ccc</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  data () {
    return {
      fruit: ['苹果','香蕉','橘子','菠萝','桃子'],
    };
  },
  methods: {
    aaa() {
      console.log("aaa函数被调用");
    },
    bbb() {
      console.log("bbb函数被调用");
    },
    getccc() {
      this.$parent.ccc()
    }
  },
}
</script>