Vue父子传值

最新推荐文章于 2024-09-23 16:36:59 发布

笨笨624

最新推荐文章于 2024-09-23 16:36:59 发布

阅读量194

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_68252492/article/details/125811278

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先在被引用的子组件中定义属性和属性值

在子组件的js中写

props {
    属性名:数据类型    
}

具体代码如下

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 导入 vue 文件 -->
  <script src="js/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 被 vm 实例所控制的区域 -->
  <div id="app">
    <parent></parent>
  </div>
  <!-- 父组件 -->
  <template id="parent">
    <div>
      <h1>我是父组件的标题</h1>
      <!-- 把需要传递给子组件的值当做子组件的属性 -->
      <child id="childName" name_1="张三" :title="obj" :num="count" :msg="msgHello"></child>
    </div>
  </template>
  <!-- 子组件 -->
  <template id="child">
    <div>
      <h1>我是子组件的标题</h1>
      <h2>父组件的id:{{id}}</h2>
      <h2>父组件的name_1:{{name_1}}</h2>
      <h2>父组件的title的名字:{{title.name}}</h2>
      <h3 :title1="title.age">{{title.age}}</h3>

    </div>
  </template>
  <script>
    // 创建 vm 实例对象
    const vm = new Vue({
      // 指定控制的区域
      el: '#app',
      data: {

      },
      methods: {

      },
      components: {
        parent: {
          template: "#parent",
          data () {
            return {
              obj: {
                name: "小花",
                age: 15
              },
              count: 100,
              // msgHello: "你好！！"
              msgHello: true
            }
          },
          components: {
            child: {
              template: "#child",
              data () {
                return {

                }
              },
              methods: {

              },
              // 设置props属性就可以接受父组件传值
              props: {
                // 1、父组件的属性名：数据类型
                id: String,
                // 2、父组件的属性名：[数据类型]
                name_1: [String],
                title: [Object],
                // 3、父组件的属性名：[数据类型,String]
                num: [Number, String],
                /* 
                  4、父组件的属性名:{
                    type:数据类型
                  }
                */
                msg: {
                  // type: String
                  type: Boolean
                },
                /* 
                  传递默认值：
                  自定义值：{
                    type：数据类型
                    default(){
                      return :值
                    }
                  }
                */
                defaultData: {
                  type: String,
                  default () {
                    return "前端你好！！！"
                  }
                }
              },
              /* 
              props与data的区别：
                1、data是当前组件私有的，props是父组件传过来的
                2、data是可读可写的，props是只读的
              */
              created () {
                console.log(this.id);//childName
                // 不能修改父组件传递过来的值
                // this.id = "one";
                console.log(this.name_1);
                console.log(this.title);
                console.log(this.num);
                console.log(this.msg);
                console.log(this.defaultData);


              }
            }
          }
        }
      }
    });
  </script>
</body>

</html>