6. Componente no Vue
6.1, função do componente
Função de componente: usada para reduzir a quantidade de código na instância do Vue. No futuro processo de desenvolvimento usando o Vue, a página pode ser dividida em vários componentes de acordo com diferentes funções de negócios e, em seguida, vários componentes são usados para completar o layout do página inteira. É conveniente usar o Vue para gerenciamento de página de desenvolvimento no futuro e é conveniente para os desenvolvedores manterem.
6.2. Uso de componentes
6.2.1, registro de componente global
Descrição: o componente global é registrado para a instância Vue, e o componente pode ser usado no escopo de qualquer instância Vue no futuro
1、开发一个全局组件
//全局组件注册 参数1：组件名称 参数2：组件配置对象:{}
// template：用来书写组件的html模板（注意：在template中必须存在一个容器 例如 div）
Vue.component('login',{
template:'<div> <h1>用户登录</h1> </div>'
});
2、使用全局组件 在Vue实例范围内
<login></login>
# 注意：
1、Vue.component 用来开发全局组件
参数1： 组件名称
参数2：组件配置():'' 用来书写组件的html代码，template中必须有一个root元素
2、使用时需要在Vue的作用范围内根据与组件名使用全局组件
3、如果在注册组件的过程中使用 驼峰命名组件的方式，在使用组件时，必须将驼峰的所有单词小写加入—进行使用
6.2.2, o uso de componentes parciais
Nota: O registro do componente é concluído registrando-se o componente em uma propriedade Componentes na instância Vue correspondente. Este método não causará acúmulo na instância Vue
- O primeiro método de desenvolvimento
<script>
//局部组件登录模板
let login ={
//具体组件名称
template: '<div><h2>小爽帅到拖网速2</h2></div>'
}
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
},
methods: {
},
components:{
//用来注册局部组件
login:login //注册局部组件
}
});
</script>
//局部组件使用 在Vue实例范围内
<login></login>
-
O segundo método de desenvolvimento
//1、声明局部组件模板，template 标签：注意 ：Vue实例作用访问外声明 <template id="loginTemplate"> <h1>小爽帅到拖网速 之 方式二</h1> </template> //2、定义变量用来保存模板配置对象 let login={ //具体局部组件名称 template:'#lgoinTemplate' //使用自定义template标签选择器即可 }; //3、注册组件 const app = new Vue({ el: "#app", data: { msg: "小爽帅到拖网速", }, methods: { }, components:{ //用来注册局部组件 login:login //注册局部组件 } }); //4、局部组件使用 在Vue实例范围内 <lgoin></login>
6.3 Uso de Prop
Função: os adereços são usados para passar os dados estáticos ou dinâmicos correspondentes para o componente
6.3.1. Passando dados estáticos para o componente, declarando dados estáticos no componente
//1、声明组件模板配置对象 props作用 用来接收使用组件时通过组件标签传递的数据
let login={
template:"<div><h1>欢迎:{
{name}} 座右铭：{
{motto}}</h1></div>",
props:['name','motto']
}
//2、注册组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components:{
login //组件注册
}
});
//3、通过组件完成数据传递
<login name="小爽" motto="木叶飞舞之处，火亦生生不息！"></login>
# 总结
1、使用组件时可以在组件上定义多个属性以及对应数据
2、在组件内部可以使用props数组声明多个定义在组件上的属性名 日后可以在组件中通过{
{属性名}}方式获取数组中属性值
6.3.2. Declarar dados dinâmicos no componente e passá-los para o componente
//1、声明组件模板对象
//定义一个局部组件声明
const login={
template:'<div><h2>火影:{
{name}} 年龄：{
{age}}</h2></div>',
props: ['name','age']
}
//2、注册局部组件
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
Age:21
},
methods: {
},
components:{
login //注册组件
}
});
//3、使用组件
//使用v-bind 形式将数据绑定Vue实例中data属性，日后data属性发生变化，组件内部数据也跟着发生变化
<login :name="msg" :age="Age"></login>
6.3.3 Fluxo de dados unilateral da prop
Todos os adereços formam uma ligação descendente unilateral entre seus adereços pai e filho : a atualização do adereço pai fluirá para os componentes filhos, mas o inverso não funcionará.
Isso evitará a alteração acidental do estado do componente pai do componente filho, o que tornará o fluxo de dados de seu aplicativo difícil de entender.
Além disso, toda vez que o componente pai muda, todos os adereços no componente filho serão atualizados para o valor mais recente. Isso significa que você não deve alterar os adereços dentro de um subcomponente. Se você fizer isso, o Vue emitirá um aviso no console do navegador.
6.4. Definir dados e eventos no componente
1. Os dados que pertencem ao componente são definidos no componente
const login={
template:"<div><h1>欢迎：{
{name}} </h1> <ul><li v-for='(item,index) in lists'>{
{index+1}}:{
{item}}</li></ul></div>",
data(){
return {
name:"小爽",
lists:['spring','springMVC','Mybatis']
}
}
}
2. Definição de eventos em componentes
const login={
template:"<input type='button' @click='change' value='点击触发事件'>",
data(){
return {
name:"小爽",
lists:['spring','springMVC','Mybatis']
}
},
methods:{
change(){
alert(this.name);
}
}
}
# 总结
1、组件中定义事件和直接在Vue中定义事件基本一致，直接在组件内部对应html代码加入@事件名-函数名方式即可
2、在组件内部使用methods属性用来定义对应的事件即可，事件函数中this指向的是当前组件的实例
6.5 Passe o evento para o componente filho e chame o evento no componente filho
Os eventos relacionados passados na chamada de resumo do subcomponente devem ser chamados usando este método. $ Emit ('nome da função')
//1、声明组件
const login = {
template: "<div> <h1>小爽{
{message}} </h1><input type='button' value='点击' @click='change'></div>",
/*不能再子组件中改变数据*/
data() {
return {
message: this.name
}
},
methods: {
change() {
//调用Vue实例中的函数
this.$emit('find'); //调用组件传递过来的其他函数时需要使用this.$emit('函数名调用')
}
},
props: ['name']
}
//2、组件注册
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
},
methods: {
findAll(){
//一个事件函数 将这个函数传递给子组件
alert('Vue实例中定义的函数')
}
},
components: {
login
}
});
//3、使用组件
<div id="app">
<login :name="msg" @find="findAll"></login> ======》 在组件内部使用 this.$emit('find')
</div>