标签：vue组件 多个 content put htm component div export compute
一、创建组件
三个模板，template、script、style分别对应html、js、css
template中只能有一个父标签，不能并列多个父标签
script必须export 一个默认函数，拥有name属性和data方法，data必须有返回值
style标签最好加入scoped属性，声明样式只对当前组件有效
<template> <div class="app"> <h1>{{msg}}</h1> </div> </template> <script> export default { name:"App", data(){ return{ msg:"内容区" } }, methods:{ }, computed:{ } } </script> <style scoped> </style>
二、父组件使用组件
1、引入
2、挂载
3、使用
<template> <div class="app"> <h1>{{msg}}</h1> <!-- 使用子组件 --> <HelloWorld></HelloWorld> <hr> <!-- 可以重复使用 --> <HelloWorld></HelloWorld> <hr> <Vcontent></Vcontent> </div> </template> <script> //引入子组件 import HelloWorld from "./components/HelloWorld" import Vcontent from "./components/Vcontent" export default { name : "App", data(){ return { msg:"hello" } }, methods:{ }, computed:{ }, //挂载子组件 components:{ HelloWorld, //HelloWorld:HelloWorld Vcontent } } </script> <style scoped> </style>
标签：vue组件 多个 content put htm component div export compute
原文地址：https://www.cnblogs.com/aizhinong/p/12606427.html
