VUE学习笔记 |
您所在的位置：网站首页 › vue实例和组件关系 › VUE学习笔记 |
VUE学习笔记
|
VUE学习笔记--组件选项
转载
mob604756fbd94e 2021-10-17 09:18:00 ©著作权 文章标签 html 数据 .net vue.js javascript 文章分类 其他 其它 VUE学习笔记--组件选项https://blog.51cto.com/u_15127631/4245365 Vue 的组件最核心的选项有以下几个： 模板（template） 初始数据（data） 接受的外部参数（props） 方法（methods） 生命周期钩子函数（lifecycle hooks） 组件 props 组件中更重要的是组件间进行通信，选项props是组件中非常重要的一个选项，起到父子组件间桥梁的作用。 1.静态props 子组件使用父组件的数据 DOCTYPE html> Vue.component('my-componet', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '{{ message }}' }) new Vue({ el:'#app' }); 动态 props 动态接收父组件数据到子组件 DOCTYPE html> Vue.component('my-componet', { props: ['message'], template: '{{ message }}' }) new Vue({ el:'#app', data:{ parentMessage:'' } }); 这里使用 v-model 绑定了父组件数据 parentMessage，当在输入框中输入数据时，子组件接收到的 props“'message'”也会实时响应，并更新组件模板。 如果你在父组件中直接传递数字、布尔值、数组、对象时， 它所传递默认值字符串。如果想传递一个实际的数值，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算，代码如下： Vue.component('my-componet', { props: ['message'], template: '{{ message }}' }) new Vue({ el:'#app' }); props 验证 当组件给其他人使用时，推荐进行数据验证。 验证的type类型可以是：String、Number、Boolean、Function、Object、Array等。 如果传入子组件的 message 不是数字，则抛出警告 DOCTYPE html> var childNode = { template: '{{message}}', props:{ 'message':Number } } var parentNode = { template:'', components: { 'child': childNode }, data(){ return{ msg: '123' } } }; // 创建根实例 new Vue({ el: '#example', components: { 'parent': parentNode } }) 单项数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。之所以这样设计，是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。 DOCTYPE html> var childNode = { template: '子组件数据' + '{{childMsg}} ' , props:['childMsg'] } var parentNode = { template: '父组件数据' + '{{msg}} ', components: { 'child': childNode }, data(){ return { 'msg':'match' } } }; // 创建根实例 new Vue({ el: '#example', components: { 'parent': parentNode } }) 组件通信 组件关系有下面三种：父-->子、子-->父、非父子。
自定义事件 当子组件需要向父组件传递数据时，就要用到自定义事件。 DOCTYPE html> Vue.component('my-component', { template:'' + '点击我触发自定义事件' , methods: { childClick () { this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2') } } }) new Vue({ el: '#app', methods: { onClick () { console.log(arguments) } } }) $emit/$on 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex var Event=new Vue(); Event.$emit(事件名，数据); Event.$on(事件名，data => {}); DOCTYPE html> A组件：{{name}} 将数据发送给C组件 B组件：{{age}} 将数组发送给C组件 C组件：{{name}},{{age}} var Event = new Vue();//定义一个空的Vue实例 var A = { template: '#a', data() { return { name: 'beixi' } }, methods: { send() { Event.$emit('data-a', this.name); } } } var B = { template: '#b', data() { return { age: 18 } }, methods: { send() { Event.$emit('data-b', this.age); } } } var C = { template: '#c', data() { return { name: '', age: "" } }, mounted() {//在模板编译完成后执行 Event.$on('data-a',name => { this.name = name;//箭头函数内部不会产生新的this,这边如果不用=>,this指代Event }) Event.$on('data-b',age => { this.age = age; }) } } var vm = new Vue({ el: '#app', components: { 'my-a': A, 'my-b': B, 'my-c': C } }); 赞 收藏 评论 分享 微博 QQ 微信 上一篇：VUE学习笔记--了解element-ui组件库 下一篇：倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何修改某个轴的数值单位 |
【本文地址】