组件需要注册后才能使用,注册分为全局注册和局部注册。全局注册后,所有Vue实例都可以使用该组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my_counter></my_counter>
<my_counter></my_counter>
</div>
<script>
//注册全局组件
Vue.component('my_counter',{
data:function(){
return {
count:0
}
},
template:'<button @click="count++">点击了{{count}}次</button>'
});
var app = new Vue({
el:'#app',
data:{},
});
</script>
</body>
</html>
在这个页面中,注册一个全局组件my-counter,这个组件显示的内容是在template选项中定义的,这里定义了一个<button>模板。点击按钮时,会对这个组件内data函数返回的数据count执行递增操作。
全局组件my-counter注册后,在父实例中可以使用<my-counter></my-counter>这样的形式来使用组件,这里my-counter使用了两次。
把父组件的数据传递给子组件,子组件会根据接收的数据来渲染不同的内容或执行不同的操作。要让子组件使用父组件的数据,需要通过子组件的props选项,使用静态props实现将父组件数据传递给子组件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<child message="Hello Vue!"></child>
</div>
<script>
//注册全局组件
Vue.component('child',{
//声明props,期望从父组件获取数据message
props:['message'],
template:'<span>{{message}}</span>'
});
var app = new Vue({
el:'#app',
data:{},
});
</script>
</body>
</html>
使用v-bind动态绑定props的值到父组件中,每当父组件的数据变化时,该变化也会传导给子组件。动态props实现将父组件数据传递给子组件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="parentMessage">
<br>
<child v-bind:message="parentMessage"></child>
</div>
<script>
//注册全局组件
Vue.component('child',{
//声明props,期望从父组件获取数据message
props:['message'],
template:'<span>{{message}}</span>'
});
var app = new Vue({
el:'#app',
data:{
parentMessage:'I\'m vue'
},
});
</script>
</body>
</html>