您的位置:首页 > Web前端 > Vue.js

(精华)2020年7月12日 vue 组件component的使用

2020-07-14 06:00 411 查看
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义组件的方式</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
<hello></hello>
<my-world></my-world>
<!-- <myWorld></myWorld> -->
</div>
<script>
// 方式1:先创建组件构造器,然后由组件构造器创建组件
// 1. Vue.extend创建组件构造器
var mycom = Vue.extend({
template: '<h2>hello word</h2>'
});
// 2. Vue.component(组件名,组件构造器)
Vue.component('hello', mycom);

// 方式2:直接创建组件 (推荐)
Vue.component('my-world', {
template: '<h2>世界, 你好</h2>'
});

var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root
el: '#app',
data: {
msg: '啦啦啦'
}
});
</script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件的分类  全局组件、局部组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="itapp">
<my-hello></my-hello>
<my-world></my-world>
</div>

<div id="app">
{{name}}
<my-hello></my-hello>
<!-- <my-world></my-world> -->
</div>
<script>
//  全局组件 可以在所有的vue实例中使用
Vue.component('my-hello',{
template:'<h2>我是全局组件</h2>',
data(){   //在组件中存储数据时,必须以函数形式,函数返回一个对象
return {
name:'laney'
}
}
});

/**
* 局部组件,只能在当前vue实例中使用
*/

var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
el:'#itapp',
data:{
msg:'软谋'
},
components:{
'my-world':{
template:'<h2>世界, 你好 {{age}}</h2>',
data(){
return {
age:'20'
}
}
}
}
});

new Vue({ //这里的vm也是一个组件,称为根组件Root
el:'#app',
data:{
name:'tom'
}
})

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="flag='my-hello'">显示hello组件</button>
<button @click="flag='my-world'">显示world组件</button>

<!-- 默认每次都会销毁非活动组件并重新创建
缓存,避免重新渲染, -->
<keep-alive>
<component :is="flag"></component>
</keep-alive>
<!-- <my-world></my-world> -->
</div>

<template id="wbs">
<div>
<h3>{{msg}}</h3>
{{time}}
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>

var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
el:'#app',
data:{
msg:'软谋',
flag:'my-hello'
},
components:{
'my-world':{
name:'wbsx',
template:'#wbs',
data(){
return {
age:'20',
msg:'world',
arr:['tom','jack','laney'],
time:Math.random()
}
}
},
'my-hello':{
template:'<h2>我是my hello {{time}}</h2>',
data(){
return {
time:Math.random()
}
}
}
}
});

</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: