Vue组件间的通信——父传子通信

最新推荐文章于 2024-04-16 20:41:46 发布

「已注销」

最新推荐文章于 2024-04-16 20:41:46 发布

阅读量193

点赞数 1

分类专栏： Vue框架笔记文章标签： vue.js es6 html html5 javascript

本文链接：https://blog.csdn.net/Linux_MK/article/details/103481858

版权

Vue框架笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、原理

组件的通信————父组件向子组件传递消息
方法:通过子组件的props属性进行传递.
props属性设置数据内容变量的定义方式有两种方式:
                方式一：字符串数组类型,数组中的字符串就是用于接收父组件所传数据的自定义变量名称(这种方式不常用)
                          props:['自定义存储变量名1','自定义存储变量名2',...]
                方式二：对象类型,使用对象类型的定义方式我们可以设置父组件传递数据的类型,也可以设置自定义存储变量名的默认值等(推荐使用这种方式)
props:{
自定义存储变量名1:{
type: xxx //规定父组件传递的数据必须是什么类型
default: xxx //规定父组件没有传递数据时该变量的默认值.
required:布尔值 //规定该属性是否必须传递数据
},
自定义存储变量名2:{
type:Array/Object,
default:function(){
//当设置的类型为数组或者对象时,默认值这里必须是一个函数,通过函数的返回值来设置默认值
return [...]/{...}
},
required:布尔值
}

}
通信步骤:
(1)创建一对父、子组件。
(2)在父组件的data属性中准备需要传递的数据;在子组件的props属性中设置一个变量用于接收父组件的数据。
(3)在使用自定义组件时,在组件名称上通过v-bind绑定子组件的props属性中的变量名,值为父组件中的数据变量名。(这里数据就实现了数据信息的传递工作)
<组件名 v-bind:子组件自定义存储变量名="父组件数据变量名"></组件名>
(4)在子组件的html实现功能template模板中使用props属性中设置的相应的自定义变量(这里就是使用从父组件获取到的数据)

代码实现案例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件之间的通信——父组件传递给子组件</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 4.使用组件,通过v-bind属性指令将父组件的数据传递给子组件 -->
    <cmpn v-bind:cperson="person"></cmpn>
  </div>

  <!--1. 定义子组件需要实现的功能 -->
  <template id="cpn">
    <div>
      <h1>{{title}}</h1>
      <!-- 3.预先将父组件传递过来的数据在子组件中渲染使用 -->
      <ul>
        <li v-for="item in cperson">姓名:{{item.name}}————年龄:{{item.age}}————祖籍:{{item.address}}</li>
      </ul>
    </div>
  </template>

  <script>
    //1.定义一个子组件构造器
    const cmpn = Vue.extend({
      template: '#cpn',
      data() {
        return {
          //定义子组件自己的数据
          title: '组件间的通信——父传子'
        }
      },
      props:{
        //2.定义变量cperson用于接收父组件传递过来的数据内容
        cperson:{
          type:Array,//定义父组件所传递的数据类型为数组类型
          default:function(){ //定义父组件没有传递数据时的默认值为一个空数组
            return []
          },
          required:true //定义父组件必须传递数据
        }
      }
    })

    //1.创建一个Vue实例对象作为父组件
    const vm=new Vue({
      el: '#app',
      data: {
        //2.设置父组件需要传递的数据内容
        person: [{
            name: '孙悟空',
            age: 20,
            address: '花果山'
          },
          {
            name: '白骨精',
            age: 18,
            address: '白骨洞'
          },
          {
            name: '唐三藏',
            age: 20,
            address: '长安城'
          }
        ]
      },
      components: {
        //1.将子组件挂载到父组件上
        cmpn
      }
    });
  </script>
</body>

</html>

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件间的通信——父传子通信

父子组件间的通信(父传子通过组件属性props，子传父通过自定义事件) 1.父传子通过组件属性props props的值有两种方式: 方式一：字符串数组，数组中的字符串就是传递时的名称(不常用) props:['数据名称','数据名称'...] ...
复制链接

扫一扫

专栏目录