vue的学习之路（Vue中组件(component )(1)，2024年是做Web前端开发人员的绝佳时机

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:‘

<input type=“button” value=“点我触发组件中事件” @click=“change”>

’,

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”>