全局注册组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-1">
<global-component></global-component>
</div>
<script type="text/javascript">
Vue.component(‘global-component‘, {
template: ‘<div>一个自定义全局组件！</div>‘
})
var vm1 = new Vue({
el: ‘#app-1‘
})
</script>
</body>
</html>
global-component是自定义标签名称，建议遵循W3C规则（全部小写，必须包含连字符(-)）
全局注册组件的语法格式为Vue.component(tagName, options)
全局注册的组件要在Vue实例化之前注册完成
局部注册组件
<div id="app-1">
<local-component></local-component>
</div>
<script type="text/javascript">
var localComponent = {
template: ‘<div>一个自定义局部组件！</div>‘
}
var vm1 = new Vue({
el: ‘#app-1‘,
// 局部注册的组件只能在父级模板中使用
components: {
‘local-component‘: localComponent
}
})
</script>
Vue对象实例化时，第5个参数类型components(组件)
局部注册的组件是有作用域的，他只能在父级模板中使用，也就是el指定的标签内使用
使用Props属性传参
<div id="app-2">
<input v-model="content" placeholder="这里输入组件参数">
<global-component v-bind:param="content"></global-component>
</div>
<script type="text/javascript">
Vue.component(‘global-component‘, {
props: [‘param‘],
template: ‘<div>组件的参数：{{ param }}</div>‘
})
var vm2 = new Vue({
el: ‘#app-2‘,
data: {
content: ‘‘
}
})
</script>
组件可以通过props属性来实现传参
列表渲染在组件中使用
一个很好玩的例子，把完整的代码贴出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-3">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="输入一个等办事项"
>
<ul>
<li
is="global-component"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
<script type="text/javascript">
// 使用$on(eventName)监听一个事件
// 使用$emit(eventName)触发一个事件
Vue.component(‘global-component‘, {
template: ‘ <li> {{ title }} <button v-on:click="$emit(\‘remove\‘)">X</button> </li> ‘,
props: [‘title‘]
})
var vm3 = new Vue({
el: ‘#app-3‘,
data: {
newTodoText: ‘‘,
todos: [
{ id: 1, title: ‘洗碗‘ },
{ id: 2, title: ‘倒垃圾‘ },
{ id: 3, title: ‘除草‘ },
],
nextTodoId: 4
},
methods: {
addNewTodo: function() {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ‘‘
}
}
})
</script>
</body>
</html>
时间： 2024-11-05 00:42:45