首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

在html里面使用vue子组件

Sonder
2021-01-19
1261字
3分钟
浏览 (2.6k)

vue的核心内容便是组件,页面的每一块都可以是一个组件,这一部分需要着重理解

基本用法

先来个小例子熟悉一下组件的基本用法

复制代码
<body>
   <div id="app">
       <p>父组件说:{{message}}</p>
       <!--使用组件-->
       <my-component></my-component>
   </div>
<!--定义模板-->
<template id="childComp">
   <p>子组件说:{{message}}</p>
</template>
<script>
   var child= {
       template: '#childComp',//必须绑定一个模板
       data:function(){
           return {
               message:"我是子组件"
           }
       }
   }
   new Vue({
       el: '#app',
       components: {
           'my-component': child
       },
       data:{
           message:"我是父组件"
       }
   })
</script>
</body>

打印结果:

复制代码
父组件:我是父组件
子组件:我是子组件

注意props传值

props传值在html页面不能使用驼峰法aaPage改为aapage,因为驼峰法取不到值。亲测有效!!

复制代码
<my-component :aaPage="111"></my-component>

//改为 aapage
<my-component :aapage="111"></my-component>

代码分析:

组件必须绑定一个模板,而模板必须为template标签。其他的用法和vue实例很相似,因为vue实例本身也可以算是一个组件。需要注意的是,在使用组件时,data必须是一个函数,该函数返回data数据,如下:

复制代码
data:function(){
   return {
        message:"我是子组件"
   }
}

在这里,大家发现我在父组件和子组件中都定义了message,但是显示的是不同的结果。因为在vue.js中组件的作用域是独立的,即使是父子组件也不能继承作用域。而要传递数据就必须借助prop和事件传参,prop往下传,事件往上传。

</body>
下一篇 / vue项目中 给input赋值之后无法修改

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)