Vue组件
Posted aden668
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件相关的知识，希望对你有一定的参考价值。
VUE组件
组件
- 每一个组件都是一个vue实例
- 每个组件均具有自身的模板template，根组件的模板就是挂载点
- 每个组件模板只能拥有一个根标签
- 子组件的数据具有作用域，以达到组件的复用
vue组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
/**
* 1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用
* 2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)
* 3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件
* 一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件）
* 4、组件的html页面结构有 template 实例成员提供
* template提供的html结构是用来构虚拟DOM
* 真实DOM最终会被虚拟DOM替换
* 根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位
* template模板有且只有一个根标签
*/
let c1 = '';
new Vue({
el: '#app',
data: {
msg: '12345',
c1: 'red'
},
template: `
<div id="app">
<p :style="{color: c1}">{{ msg }}</p>
<p @click="clickAction">{{ msg }}</p>
</div>
`,
methods: {
clickAction() {
console.log(this.msg)
}
}
})
</script>
</html>子组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子组件</title>
</head>
<body>
<!--根组件的template-->
<div id="app">
<!--在根组件template中加载的组件，称之为根组件的子组件-->
<my-tag></my-tag>
<my-tag></my-tag>
<my-tag></my-tag>
<tag></tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1、定义组件
// 2、注册组件
// 3、使用组件
// 如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件
let myTag = {
template: `
<div>
<h3>子组件</h3>
<p>我是自定义的子组件</p>
</div>
`,
};
// 了解：全局组件，不要注册就可以直接使用
Vue.component('tag', {
template: `
<div>
<h3>全局组件</h3>
<p>我是自定义的全局组件</p>
</div>
`,
});
new Vue({
el: '#app',
components: {
// 'my-tag': myTag,
// myTag: myTag,
myTag,
}
})
</script>
</html>以上是关于Vue组件的主要内容，如果未能解决你的问题，请参考以下文章