props : {beanProps : {type : Object},// 多种类型propB: [String, Number],// 必传且是字符串propC: {type: String,required: true},// 数字，有默认值propD: {type: Number,default: 100},// 数组/对象的默认值应当由一个工厂函数返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {return value > 10}}},

我们在 props 中接收数据，注意props对象里面键值是对改数据的数据类型的规定。做了规范，使用者就只能传输指定类型（type类型）的数据，否则报警告

　　　　而props对象中的数据，我们可以直接在当前组件中使用 this.beanProps ，可以直接使用。这里要强调一下，props传过来的数据只做展示，不得修改，想修改，再新写一个data中的变量承接做数据的再处理。

调用的时候

<!--要调用的页面组件的页面需要import导入组件页面，然后再起别名-->
import treeSelectPeople from "../../../components/tree-select-people.vue";<!--导入之后要添加组件到component对象里-->components: { treeSelectPeople },<!--然后调用的时候标签名，就是你导入组件起的变量名了-->
<treeSelectPeople :beanProps="newBean.props"></treeSelectPeople>

二.我们已经会使用父组件向子组件传数据了,那子组件如何来修改父组件的数据呢？

　　　　这里提供 2 种实现方法，但是第一种不推荐，强烈不推荐

　　　　方式一：　　

selectValue: {data: '1'},//代码段this.selectValue.data = '我被修改了'

　　　　即，父组件将对象数据传递给子组件，子组件直接修改props过来的对象的值

　　　　可以实现，感觉是一个比较快捷的方式。但是不推荐，这种方式写多了，容易出错，特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好，所以建议大家别这样写。

　　　　他的实现原理简单提一下：这个对象、数组啦，是引用数据类型，说白了，就是存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。

　　方式二：

　　　　正儿八经的通过 $emit 方法去掉父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）（就是在子组件新建一个新的变量来获取父组件传过来的值）

<template><section class="f-mainPage"><!--selectFunc 选择完成的回调      searchList 下拉列表的数据--><search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search></section>
</template><script type="text/ecmascript-6">import Search from '../vuePlugin/search'export default {data() {return {searchList: ['草船借箭', '大富翁', '测试数据'],// 直接通过props传递对象 修改，挺便捷的,但是不规范selectValue: {data: '1'},// 通过emit修改，规范写法selectValue2: ''}},mounted() {},methods: {pageGo(path) {this.$router.push('/' + path)},selectFunc(value) {this.selectValue2 = valueconsole.log(this.selectValue)console.log(this.selectValue2)}},components: {Search}}
</script>

vue组件封装讲解，和注意事项相关推荐

Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
Vue组件封装，（面试回答）
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
Vue组件封装的过程
Vue组件封装的过程 vue组件的定义组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...

vue组件封装讲解，和注意事项

调用的时候

二.我们已经会使用父组件向子组件传数据了,那子组件如何来修改父组件的数据呢？

vue组件封装讲解，和注意事项相关推荐

最新文章

热门文章

vue组件封装讲解，和注意事项

调用的时候

二.我们已经会使用 父组件向子组件传数据了,那子组件如何来修改父组件的数据呢？

vue组件封装讲解，和注意事项相关推荐

最新文章

热门文章

二.我们已经会使用父组件向子组件传数据了,那子组件如何来修改父组件的数据呢？