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

Vue.js 添加组件

2016-03-31 14:08 701 查看 
<!DOCTYPE HTML>
<html>
<head>
<title>vue.js hello world</title>
<script src="../vue.js"></script>

</head>
<body>
<div id="example">
<my-component v-on:click="cao"></my-component>
</div>
<script>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});

// 注册
Vue.component('my-component', MyComponent);

// 创建根实例
new Vue({
el: '#example',
methods:{
cao:function(event){
alert(event.target.tagName);
}
}
});

</script>
</body>
</html>


效果：



局部注册

不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 
components
注册：

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
'my-component': Child
}
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航