在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>