Vue2学习笔记:组件（Component）

时间：2022-07-27 22:08:18

组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。

1. 全局 Vue.component(tagName, options)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<!-- // <script src="vue.js"></script> -->
</head>
<body> 
<div id="box">
<test></test>
</div>
<script type="text/javascript">
//注册
Vue.component('test', {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的组件'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
});

//创建根实例
var vm = new Vue({
el:'#box',
});
</script>
</body>
</html>

2. 局部注册

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body> 
<div id="box">
<test></test>
</div>
<script type="text/javascript">
///定义组件
 var testTemplate = {
 template: '<div @click="change">{{msg}}</div>',
 data:function(){
 return {msg:'我的局部组件'}
 },
 methods:{
 change:function(){
 //todo
 console.log(this);
 }
 }
 };

 //创建根实例
 var vm = new Vue({
 el:'#box',
 components:{
 'test': testTemplate
 }
 });
</script>
</body>
</html>

3. 动态切换组件

首先这样用法， 这样指定组件，下面有两个 我们指定其中的一个

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body> 
<div id="box">
<components :is="testTemplate"></components>
</div>
<script type="text/javascript">
///定义组件
 var testTemplate = {
 template: '<div @click="change">{{msg}}</div>',
 data:function(){
 return {msg:'我的局部组件1'}
 },
 methods:{
 change:function(){
 //todo
 console.log(this);
 }
 }
 };

 //创建根实例 
 var vm = new Vue({
 el:'#box'
 });
</script>
</body>
</html>

下面有两个 我们指定其中的一个

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body> 
<div id="box">
<input type="button" value="1" @click="a='testTemplate'">
<input type="button" value="2" @click="a='testTemplate2'">
<components :is="a"></components>
</div>
<script type="text/javascript">
///定义组件
 var testTemplate = {
 template: '<div @click="change">{{msg}}</div>',
 data:function(){
 return {msg:'我的局部组件1'}
 },
 methods:{
 change:function(){
 //todo
 console.log(this);
 }
 }
 };

 var testTemplate2 = {
 template: '<div @click="change">{{msg}}</div>',
 data:function(){
 return {msg:'我的局部组件2'}
 },
 methods:{
 change:function(){
 //todo
 console.log(this);
 }
 }
 };

 //创建根实例 
 var vm = new Vue({
 el:'#box',
 data:{
 a: testTemplate //一开始让a的第一个组件
 },
 components:{ //要把组件写入到components里面，如果没有放的话在切换的时候就会找不到 组件
 'testTemplate':testTemplate,
 'testTemplate2':testTemplate2
 }
 });
</script>
</body>
</html>
标签：

相关文章