如何在Vue.js项目中添加组件
如何在Vue.js项目中添加组件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
具体如下：
<!DOCTYPEHTML>
<html>
<head>
<title>vue.jshelloworld</title>
<scriptsrc="../vue.js"></script>
</head>
<body>
<divid="example">
<my-componentv-on:click="cao"></my-component>
</div>
<script>
//定义
varMyComponent=Vue.extend({
template:'<div>Acustomcomponent!</div>'
});
//注册
Vue.component('my-component',MyComponent);
//创建根实例
newVue({
el:'#example',
methods:{
cao:function(event){
alert(event.target.tagName);
}
}
});
</script>
</body>
</html>效果：
局部注册
不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册：
varChild=Vue.extend({/*...*/})
varParent=Vue.extend({
template:'...',
components:{
//<my-component>只能用在父组件模板内
'my-component':Child
}
})关于如何在Vue.js项目中添加组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。
目录
0 条评论
本站已关闭游客评论，请登录或者注册后再评论吧~