vue组件
Posted cowboybusy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件相关的知识，希望对你有一定的参考价值。
1.component注册组件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> </body> <script type="text/javascript"> Vue.component(‘todo-item‘, { props: [‘todo‘], template: ‘<li>{{ todo.text }}</li>‘ }); var app7 = new Vue({ el: ‘#app-7‘, data: { groceryList: [ { id: 0, text: ‘蔬菜‘ }, { id: 1, text: ‘奶酪‘ }, { id: 2, text: ‘随便其它什么人吃的东西‘ } ] } }); </script> </html>
2.可以把component中的组件抽出来，用extend方法定义组件，component负责注册组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo v-for="item in groceryList" v-bind:text="item">
</todo>
</ol>
</div>
</body>
<script type="text/javascript">
// 构建一个子组件
var todoItem = Vue.extend({
template: "<li> {{ text }} </li>",
props: {
text: {
type: String,
default: ‘‘
}
}
});
Vue.component(‘todo‘, todoItem);
new Vue({
el: ‘#app‘,
data: {
groceryList: [
‘蔬菜‘,
‘奶酪‘,
‘随便其它什么人吃的东西‘
]
}
});
</script>
</html>
3.组件可以嵌套使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script type="text/javascript">
// 构建一个子组件
var todoItem = Vue.extend({
template: "<li> {{ text2 }} </li>",
props: {
text2: {
type: String,
default: ‘‘
}
}
});
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-bind:text2="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注册子组件
components: {
todoItem: todoItem
}
});
// 注册到全局
Vue.component(‘todo‘, todoWarp);
new Vue({
el: ‘#app‘,
data: {
groceryList: [
{ id: 2, text: ‘蔬菜‘ },
{ id: 3, text: ‘奶酪‘ },
{ id: 4, text: ‘随便其它什么人吃的东西‘ }
]
}
});
</script>
</html>
也可以使用v-text指令替代v-bind,v-text指令设置元素的文本，这样的话，就不需要定义text属性了
以下效果跟上面一样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script type="text/javascript">
// 构建一个子组件
var todoItem = Vue.extend({
template: "<li></li>",
});
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注册子组件
components: {
todoItem: todoItem
}
});
// 注册到全局
Vue.component(‘todo‘, todoWarp);
new Vue({
el: ‘#app‘,
data: {
groceryList: [
{ id: 2, text: ‘蔬菜‘ },
{ id: 3, text: ‘奶酪‘ },
{ id: 4, text: ‘随便其它什么人吃的东西‘ }
]
}
});
</script>
</html>
:todo-data跟v-bind:todo-data效果一样
以上是关于vue组件的主要内容，如果未能解决你的问题，请参考以下文章