Vue的组件及传参
Vue组件的概念
我们首先要知道组件的概念,实际上每一个组件都是一个vue实例,也就是我们之前所生成的new Vue({}),组件有以下几个特点:
- 每个组件要有自己的template模板,根组件的模板就是我们在定义Vue的时候挂载点所在的那个大标签,
- 每个组件的模板只能有一个跟标签,这点很重要,就是说不管是根组件还是子组件,其模板template里面都不能包含多于一个的跟标签
- 子组件的数据有其自己的作用域,所以我们在定义子组件的时候要对其数据做局部化处理,以达到对组件复用之后数据独立的效果,即用
data(){}来返回其数据,返回的数据应该是子组件自身绑定方法的返回值,并以字典的方式返回
根组件
上文中已经说过,根组件的定义非常简单
let app = new Vue({
el:'#app', //根组件的template模板其实就是挂载的这个标签的所有内容
data:{
msg:"根组件"
},
})子组件(局部组件)
子组件的定义方式就比根组件要麻烦一些,具体如下:
- 定义一个子组件,里面要有template模板,data数据返回,methods局部数据处理等
- 定义完成之后要在根组件所在的Vue里面的components写入子组件的名称,才能生效
<script>
let tag = {
template: `
<div class="box">
</div>
`,
//子组件的模板要自己写,写的方式是template:``,这里是两个反引号,就是键盘1左边的那个键,我们在反引号中间写自己想要呈现的组件的样式
data () {
return {
num: 0
}
},
//子组件要有自己的数据的局部化处理,这里就是,
methods: {
fn() {
this.num ++
}
},
//这里是对局部化后的数据进行操作,是独立于其余的复用组件的
};
new Vue({
el: '#app',
components: {
tag,
}
//关键字为components,子组件在定义完成之后需要在根组件所在的new Vue里面的cmponents里面写入子组件的名称.
});
</script>父组件向子组件传值
父组件向子组件传值的前提是,该子组件是属于该父组件的,不能向并不属于自己的子组件传值,另外,父组件向子组件传值的时候,要注意以下几点:
- 数据首先是在父组件里面产生的,然后才传到子组件,顺序不能反
- 子组件用props来接收父组件中的值,收到之后就可以在子组件里面当做一个变量来使用
<body>
<div id="app">
<div class="wrap">
<tag v-for="dog in dogs" v-bind:dog="dog" :a="1" :b="2"/>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs = [{1},{2},{3}]
let tag = {
props: ['dog', 'a', 'b', 'z'],
//子组件内部通过props来接收父组件的传值,这样可以接收父组件里面存在的所有值,只要父组件有,都可以接收,如果父组件里没有,比如z,那么会取到none,也不会报错
template: `
<div class="box">
<p>{{ dog }}</p>
</div>
`,
data () {
return {
num: 0,
}
},
methods: {
fn() {
this.num ++
}
},
};
new Vue({
el: '#app',
data: {
dogs,
},
components: {
tag, //这里证明tag子组件是属于父组件的
}
});
</script>