Vue组件创建，父级组件传递给子级组件

最新推荐文章于 2024-05-29 18:55:00 发布

yorup

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量613

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_48639378/article/details/126168179

版权

组件的命名，一般选用School、MyCpn这样的大驼峰式，这是Vue脚手架必须的，在自定义元素的时候可以使用<my-cpn></my-cpn>或<MyCpn></MyCpn>两种方式。

1.在html文件创建组件（基本不用这种）

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 my-cpn。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： <my-cpn></my-cpn>

<body>
<div id="app">
  <!-- 3.使用组件 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <cpnc></cpnc>
</div>
<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象
  const cpnc = Vue.extend({
    template:`
        <div>
          <h2>标题</h2>
          <p>内容1...<p>
          <p>内容2...<p>
        </div>`
  })
  // 2.全局注册组件
  Vue.component('my-cpn', cpnc)
  const app = new Vue({
    el:"#app",
    data:{
    },
    components:{
      //局部组件创建
      cpnc:cpnc
    }
  })
</script>
</body>

2.父组件和子组件区别

代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。

注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等

 <div id="app">
    <cpn2></cpn2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpn1 = Vue.extend({
      template:`
        <div>
          <h2>标题1</h2>
          <p>组件1</p>
        </div>`
    })
    // 组件2中使用组件1
    const cpn2 = Vue.extend({
      template:`
        <div>
          <h2>标题2</h2>
          <p>组件2</p>
          <cpn1></cpn1>
        </div>`,
      components:{
        cpn1:cpn1
      }
    })

    const app = new Vue({
      el:"#app",
      components:{//局部组件创建
        cpn2:cpn2
      }
    })
  </script>

3.父组件给子组件传递数据

使用组件的props属性

在父组件写好相应的属性名及变量数据

<div id="app">
    <cpn :cMessage="message"></cpn>
</div>
<script>    
const app = new Vue({
      el: "#app",
      data: {
        message: "你好",
        movies: ["复仇者联盟", "钢铁侠", "星际穿越", "哪吒传奇"]
      },
      components: {
        cpn
      }
    })
  </script

然后在子组件用props写定义好的属性名的类型（注意是属性名不是数据的变量名）

props: { 
          cmessage: {
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
          }
  }

最后要记得在子组件<template>里面写具体的标签（元素）名，使得数据可以在页面显示

<h2>{{cmessage}}</h2>

yorup

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件创建，父级组件传递给子级组件

Vue组件创建，父级组件传递给子级组件
复制链接

扫一扫