vue组件在方法中使用props值,vue props对象默认值设置

　　本文主要详细介绍Vue的道具配置项。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

简介

　　本文主要介绍道具配置项的概念和用途。

　　Props用于从父组件接收数据。

　　编写步骤有两个：

　　子组件使用props配置项来接收属性。当父组件使用子组件时，数据以组件标签属性的形式传输。子组件使用props配置项接收属性有三种形式：

　　第一种：简单模式。

　　main.js

　　//引入vue依赖

　　从“vue”导入Vue

　　//引入组件App

　　从导入应用程序。/App.vue

　　//关闭生产提示

　　Vue.config.productionTip=false

　　//创建一个vue实例

　　新Vue({

　　//这个我还没学会。要知道他的作用是把app放进容器里。

　　render: h=h(App)，

　　//为这个vue实例配置管理id为app的容器。

　　}).$ mount(“# app”)

　　App.vue:

　　模板

　　！-写作结构-

　　差异

　　！-当父组件写入组件标签时，它将数据作为属性传递。-

　　学生student name= yehao cong student age= 25 /student

　　学生studentName=廖晓燕 student age= 21 /学生

　　/div

　　/模板

　　脚本

　　从导入学生。/components/Student.vue

　　导出默认值{

　　组件：{

　　//注册组件

　　学生

　　}

　　}

　　/脚本

　　风格

　　/风格

　　学生. vue:

　　模板

　　！-写组件结构代码，也就是html代码-

　　！-你需要一个div把它括起来，也就是只能有一个根元素。通常，使用一个div

　　橙色

　　Div名称：{ {学生名称}}/div

　　Div年龄：{ {学生年龄}}/div

　　/div

　　/模板

　　脚本

　　//写交互代码的地方，需要暴露，引入其他地方。

　　//这个需要了解一点es6模块化的知识。通常，这里使用默认公开，因为这是一个单文件组件，只需要公开一个组件对象，

　　//而且引入默认公开的组件引入语法更简单。

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　//简单的编写，用来接收父组件传递的数据。

　　//数组形式，可以在其中声明属性名。

　　道具：[studentName ， studentAge]，

　　}

　　/脚本

　　风格

　　/*在那里书写样式*/。橙色{

　　背景色：橙色；

　　}

　　/风格

　　效果:可以看到数据正确显示。

　　但是上面的数据是通过一个文件，也就是父组件，以普通属性的形式传输的，这就导致所有被传输的属性的类型都是字符串。

　　例子：

　　默认通过年龄加一。

　　效果：

　　所以不能用普通的属性转移。您需要在v-bind指令的帮助下绑定属性值。如果使用v-bind绑定属性，它将返回表达式返回的值，因此可以控制属性值的类型。

　　效果：

　　如果使用v-bind属性绑定来传输属性，也可以传输数组和对象类型的数据。

　　效果：

　　第二种方法可以限制数据的类型：

　　将intentional age属性设置为字符串。

　　效果:这种对书名的限制只是控制台的警告，实际上并不影响显示。

　　第三种方式：可以限制类型，设置默认值，设置是否需要。

　　通过时，第二个标签不通过年龄测试默认值，第一个标签不通过姓名测试必要性。

　　效果：

　　可以发现其中的限制只会给出一个控制台警告，而不会影响使用。

　　道具的熟悉度是只读的。如果修改，会被控制台警告，但修改会成功，只是警告。

　　效果：

　　如果实际业务需要改变道具的属性，可以将道具的内容复制到数据中，然后在数据中修改数据。

　　效果：

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。