gitHub地址：https://github.com/huangpna/vue_learn里面的lesson06
一 vue组件基本实例
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app1</title>
</head>
<body>
<div id="app1">
<button-counter></button-counter> <!--注意：点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。-->
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
Vue.component(‘button-counter‘,{ //全局注册一个组件
data:function () {
return {
count:0
}
},
template:‘<div><button @click="count++">点击一下</button> <span>{{count}}</span></div>‘
});
new Vue({el:‘#app1‘}); //创建一个vue实例
</script>
</html>
(1)因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
(2)一个组建的data选项必须是一个函数，而不是像之前一样直接接受一个对象
(3)有两种注册注册组件的方式：全局注册和局部注册；至此，我们的注册都只是通过Vue.component全局注册的。
(4)全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
二 通过prop给子组件传递数据
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app1</title>
</head>
<body>
<div id="app1">
<button-counter title="My journey with Vue"></button-counter> //通过自定义特性传递值
<button-counter title="Blogging with Vue"></button-counter>
<button-counter title="Why Vue is so fun"></button-counter>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
Vue.component(‘button-counter‘,{ //全局注册一个组件
props:[‘title‘], //可以传递任何类型的值
data:function () {
return {
count:0
}
},
template:‘<div><button @click="count++">点击一下</button> <span v-if="count == 1">{{title}}</span></div>‘ //值显示，查看是否传递成功
});
new Vue({el:‘#app1‘}); //创建一个vue实例
</script>
</html>
一个组件默认可以用过任意数量的prop,任何值都可以传递给任何 prop。在上述例子中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像上面例子一样把数据作为一个自定义特性传递进来。
例子2：
注意：这个时候我们想要给每篇博文渲染一个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app2</title>
<style>
#app2>div{
width:800px;
height:160px;
background-color: #ff4225;
font-size:35px;
text-align:center;
line-height:160px;
margin:0 auto 20px;
}
</style>
</head>
<body>
<div id="app2">
<my-content v-for="item in dataList" v-bind:num="item.id" v-bind:title="item.title"></my-content> <!--动态传递值-->
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
Vue.component(‘my-content‘,{
props:[‘title‘,‘num‘],
data:function () {
},
template:‘<div>{{title}}------{{num}}</div>‘
});
new Vue({
el:‘#app2‘,
data:{
dataList: [
{ id: 1, title: ‘博文组件‘ },
{ id: 2, title: ‘博文组件‘ },
{ id: 3, title: ‘博文组件‘ }
]
}
});
</script>
</html>
但是很多时候我们的博文不止需要标题和内容，可能要传递的数据更多，这个时候组件就会变得越来越复杂，这个时候你可以变成只接受一个单独的dataList props。
注意：必须将组件模板包含在一个父元素内，否则会报错。
原文地址：https://www.cnblogs.com/1156063074hp/p/10063228.html
时间： 2024-08-02 01:50:55