- 注意：其中添加div的意义就是让template标签有一个根标签 ，否则只展示“欢迎进入登录程序”
- 不加div效果图
（2）两种开发方式
- 第一种开发方式
//局部组件登录模板声明
let login ={ //具体局部组件名称
template:‘
用户登录
};
const app = new Vue({
el: “#app”,
data: {},
methods: {},
components:{ //用来注册局部组件
login:login //注册局部组件 es6的新特性可以直接写login，也可以的
}
});
//局部组件使用 在Vue实例范围内
- 第二种开发方式
//1.声明局部组件模板 template 标签 注意:在Vue实例作用范围外声明
用户登录
//2.定义变量用来保存模板配置对象
let login ={ //具体局部组件名称
template:‘#loginTemplate’ //使用自定义template标签选择器即可
};
//3.注册组件
const app = new Vue({
el: “#app”,
data: {},
methods: {},
components:{ //用来注册局部组件
login:login //注册局部组件
}
});
//4.局部组件使用 在Vue实例范围内
5、Prop的使用
作用:props用来给组件传递相应静态数据或者是动态数据的
(1)通过在组件上声明静态数据传递给组件内部
//1.声明组件模板配置对象
let login = {
template:“
欢迎:{{ userName }} 年龄:{{ age }}
props:[‘userName’,‘age’] //props作用 用来接收使用组件时通过组件标签传递的数据
}
//2.注册组件
const app = new Vue({
el: “#app”,
data: {},
methods: {},
components:{
login //组件注册
}
});
//3.通过组件完成数据传递
总结:
1.使用组件时可以在组件上定义多个属性以及对应数据
2.在组件内部可以使用props数组生命多个定义在组件上的属性名
3.日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值
(2)通过在组件上声明动态数据传递给组件内部
//1.声明组件模板对象
const login = {
template:‘
欢迎: {{ name }} 年龄:{{ age }}
props:[‘name’,‘age’]
}
//2.注册局部组件
const app = new Vue({
el: “#app”,
data: {
username:“小陈陈”,
age:23
},
methods: {},
components:{
login //注册组件
}
});
//3.使用组件
//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化
(3) prop的单向数据流
单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 ：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
-
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 ：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
-
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不 应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网
(4)父组件向局部组件传递静态数据
{{msg}}
(5)父组件向局部组件传递动态数据
{{msg}}
6、组件中定义数据和事件使用
1. 组件中定义属于组件的数据
{{msg}}
2.组件中事件定义
const login={
template:‘
data(){
return {
name:‘王恒杰’
};
},
methods:{
change(){
alert(this.name)
alert(‘触发事件’);
}
}
}
总结
1.组件中定义事件和直接在Vue中定义事件基本一致
直接在组件内部对应的html代码上加入@事件名=函数名方式即可
2.在组件内部使用methods属性用来定义对应的事件函数即可,
事件函数中this 指向的是当前组件的实例
7、向子组件中传递事件并在子组件中调用该事件(子组件向父组件传递数据)
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用
(1)子组件调用父组件，并向父组件传递数据
<button @click=“sup()”>点我触发父组件事件
{{msg}}
<login @sup=“sup”>
(2)子组件向父组件传递对象
<button @click=“sup()”>点我触发父组件事件
{{user}}
{{msg}}
<login @sup=“sup”>
