除了根组件之外的全局组件和局部组件的data数据必须是函数
data(){
return {
}
}
根组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
//下面的new Vue就是根组件
var app = new Vue({
el: '#app',
data: {
msg: 'hello,world'
}
})
</script>
</body>
</html>
全局组件：
全局组件注册方式：Vue.component(组件名,{方法})
全局组件必须写在Vue实例创建之前，才在该根元素下面生效；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<child-component/>
</div>
<script type="text/javascript">
//使用Vue.component()方法定义全局组件,参数一是组件名，参数二是组件模板和数据等
Vue.component('child-component',{
template: '<h1>hello,世界！</h1>'
})
//下面的new Vue就是根组件
var app = new Vue({
el: '#app',
data: {
msg: 'hello,world'
}
})
</script>
</body>
</html>
局部组件||子组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<hdcms></hdcms>
</div>
<script type="text/javascript">
//下面的new Vue就是根组件
var app = new Vue({
el: '#app',
data: {
msg: 'hello,world666'
},
// 局部组件||子组件
components: {
hdcms: {
template: '<h3>我是子666组件</h3>'
}
}
})
</script>
</body>
</html>
组件的template模板可以拆出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<hdcms></hdcms>
</div>
<!-- 这里把子组件的模板拆出来书写 -->
<script type="text/x-template" id="news">
<div>
<h3>我是子组件的模板</h3>
</div>
</script>
<script type="text/javascript">
//下面的new Vue就是根组件
var app = new Vue({
el: '#app',
data: {
msg: 'hello,world666'
},
// 局部组件||子组件
components: {
hdcms: {
template: '#news'
}
}
})
</script>
</body>
</html>
网友评论