Vue组件化学习（二）

最新推荐文章于 2023-07-12 19:12:14 发布

hejianghaoswu

最新推荐文章于 2023-07-12 19:12:14 发布

阅读量91

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/hejianghaoswu/article/details/119042362

版权

一、组件通信

通过props向子组件传递数据
通过自定义事件向父组件发送消息

示例程序：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>


</head>
<body>

<div id="app">

<cpn :chobbies="hobbies" @btnclick="getData"></cpn>
<h1>{{message}}</h1>
</div>

<template id="cpn">

  <div>
    <ul>
      <li v-for="item in chobbies">{{item}}</li>
    </ul>
    <button @click="sendData">将子组件数据传送给父组件</button>
  </div>

</template>
<script>

  let app = new Vue({
    el:"#app",
    data:{
      hobbies:['篮球','羽毛球','乒乓球'],
      message:""

    },
    methods:{
      getData(index){
        this.message=index;
      }
    },
    components:{
      cpn:{
        template:"#cpn",
        data() {
          return {cmessage:'goodbye'}
        },
        props:{
          chobbies:Array
        },
        methods:{
          sendData(){
            this.$emit("btnclick",this.cmessage)
          }
        }
      },
    }
  })

</script>

</body>
</html>

二、组件访问

父组件通过$children和$refs访问子组件

a. 父组件通过$children访问子组件

通过$children访问子组件，得到的是一个子组件数组，数组每个元素是一个子组件对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>


</head>
<body>

<div id="app">

  <cpn ></cpn>
  <cpn ></cpn>
  <button @click="showChildern">按钮</button>

</div>

<template id="cpn">

  <div></div>

</template>
<script>

  let app = new Vue({
    el:"#app",
    data:{
      hobbies:['篮球','羽毛球','乒乓球'],
      message:""
    },
    components:{
      cpn:{
        template:"#cpn",
        data() {
          return {cmessage:'goodbye'}
        },
      },
    },
    methods:{
      showChildern(){
        let arr = this.$children
        for (let i=0;i<arr.length;i++){
          console.log(arr[i])
        }
      }
    }
  })

</script>

</body>
</html>

b. 父组件通过$refs访问子组件

通过$refs可以精确访问子组件，但是要给子组件标签加上ref属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>


</head>
<body>

<div id="app">

  <cpn ref="aaa"></cpn>
  <cpn ></cpn>
  <cpn ></cpn>
  <button @click="showChildern">按钮</button>

</div>

<template id="cpn">

  <div></div>

</template>
<script>

  let app = new Vue({
    el:"#app",
    data:{
      hobbies:['篮球','羽毛球','乒乓球'],
      message:""
    },
    components:{
      cpn:{
        template:"#cpn",
        data() {
          return {cmessage:'goodbye'}
        },
      },
    },
    methods:{
      showChildern(){
        console.log(this.$refs.aaa.cmessage)
      }
    }
  })

</script>

</body>
</html>

子组件通过$parent访问父组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>


</head>
<body>

<div id="app">

  <cpn ></cpn>

</div>

<template id="cpn">

  <div>{{cmessage}}</div>

</template>
<script>

  let app = new Vue({
    el:"#app",
    data:{
      message:"我是父组件的消息"
    },
    components:{
      cpn:{
        template:"#cpn",
        data() {
          return {cmessage:this.$parent.message}
        },
      },
    },
  })

</script>

</body>
</html>