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

Vue 测试实例-组件

2017-02-26 21:17 316 查看

方式一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例-组件</title>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<Child abc="string123"></Child>
</div>

<script>
var Child = {
template: '<h1 @click="ok">自定义组件!{{abc}}</h1>',
props: {
abc:String
},
methods: {
ok: function() {
alert(this.abc);
}
}
}

// 创建根实例
new Vue({
el: '#app',
components: {
'Child': Child
}
})
</script>
</body>
</html>

方式二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例-组件</title>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<Child abc="string123"></Child>
</div>

<script>

Vue.component("Child",{
template: '<h1 @click="ok">自定义组件!{{abc}}</h1>',
props: {
abc:String
},
methods: {
ok: function() {
alert(this.abc);
}
}
});

// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航