您的位置：首页 > 产品设计 > UI/UE

vue进阶（1） ---自定义组件

2017-11-01 14:39 337 查看

vue自定义组件

1、局部组件，局部组件必须要手动挂载，不然无法生效

2、全局组件，全局组件不需要手动挂载，但是不常用，尽量不要在全局上挂载变量或者组件（可能会影响浏览器性能）

3、配合模板使用实现组件间的嵌套

example：局部组件和全局组件的使用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<hello></hello>
<world></world>
</div>
<script type="text/javascript">
//自定义组件(组件注册一定要在实例化vue之前),组件内部也支持钩子方法
//1、局部组件   必须要手动挂载  不然不生效
var Hello = {
template:"<h1 @click='clickFn'>{{ msg }}</h1>",
//自定义组件（局部组件和全局组件都是）和vue实例不一样的是，vue实例的data是一个json，而自定义组件的data是一个函数，并且格式固定！必须以json形式return
data: function(){
return {
msg:"点我"
}
},
methods:{
clickFn: function(){
alert("Don't touch me!")
this.msg = "Don't touch me!";
}
},
//钩子方法，在模板渲染之前
//vue 没有控制器的概念，因此我们通过钩子来代替控制器
beforeCreate : function(){
console.log('I am ready')
},
//钩子方法，在模板渲染完成之后
mounted : function(){
console.log('I have finished')
}
}
//2、全局组件 无需手动挂载 不常用（尽量不要在全局上挂载变量或者组件）
//注册组件
Vue.component('world',{
template:"<h1 @click='clickFn'>{{ msg }}</h1>",
data: function(){
return {
msg:'点我'
}
},
methods:{
clickFn: function(){
alert('You can touch me~')
this.msg = "You can touch me~";

}
}
})
//实例化vue对象并且手动挂载自定义组件
var vm = new Vue({
el:'#example',
components:{//在这个方法里面挂载自定义组件，前面是标签名称，后面是首字母大写的变量名
'hello':Hello
}
});
</script>
</body>
</html>

example：配合模板自定义局部组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试2</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
*{
list-style: none;
}
</style>
</head>
<body>
<div id="example">
<!-- 组件调用 -->

4000
<hello></hello>
<!-- {{title}}  title is not defined -->
</div>
<!-- 编写模板（模板在HTML页面中会默认display：none） -->
<template id="example01">
<!-- vue2.0以后，模板内不支持多个代码片段，必须要有层级关系 -->
<div>
<ul>
<!-- <li>{{msg}}</li>  msg is not defined -->
<li>{{title}}</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
</template>
<script type="text/javascript">
//Vue自定义组件（配合模板使用方法）   自定义的组件**默认**是不能和vue实例共享数据的
//自定义局部组件
var Hello = {
//使用模板
template : '#example01',//选择器
data : function(){
return {
title : 'I am son'
}
}
}
//挂载组件
var vm = new Vue({
el:'#example',
data : {
msg : " I am father"
},
components: {
'hello':Hello
}
});
</script>
</body>
</html>

example：配合模板自定义局部组件并实现组件间的嵌套

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue组件间的套用 -->
<div id="example">
<!-- 父组件 -->
<parent></parent>
</div>
<!-- 定义模板 -->
<!-- 一定要注意，使用模板配合组件套用的时候，不要直接把子组件放在父组件标签里面，要放在模板里，因为渲染时模板会替换标签，所以标签里的内容都会被忽略的 -->
<template id="example01">
<div>
<h1>我是父组件</h1>
<!-- 子组件 -->
<child></child>
</div>
</template>

<script>
//注意顺序，子组件注册必须在父组件之前，不然无法调用！（JS域解析原理）
var Child = {
template : '<h2>我是子组件</h2>'
}
var Parent = {
template : '#example01',
components : {
'child':Child
}
}
var vm = new Vue({
el:'#example',
components : {
'parent': Parent
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue自定义组件

相关文章推荐

新的分享

章节导航