网站建设周期,网站开发工作室策划案,网站如何清除百度收录,网站怎么做内链接地址父组件传值到子组件 所有的 props 都遵循着单向绑定原则#xff0c;props 因父组件的更新而变化#xff0c;自然地将新的状态向下流往子组件#xff0c;而不会逆向传递。这避免了子组件意外修改父组件的状态的情况#xff0c;不然应用的数据流将很容易变得混乱而难以理解props 因父组件的更新而变化自然地将新的状态向下流往子组件而不会逆向传递。这避免了子组件意外修改父组件的状态的情况不然应用的数据流将很容易变得混乱而难以理解 另外每次父组件更新后所有的子组件中的 props 都会被更新到最新值这意味着你不应该在子组件中去更改一个 prop。若你这么做了Vue 会在控制台上向你抛出警告: 父组件
templatediv!-- ChildModule mytitle我是标题 aa张三 bb李四 v-bind{ name: 王五, age: 19 } /ChildModule --!--也可以直接v-bind一个对象--ChildModule mytitle我是标题 aa张三 bb李四 v-bindmyuser/ChildModule/div
/template
script
import ChildModule from ./components/ChildModule.vue //导入ChildModule组件模板
export default {data() {return {myuser: {name: 钱七,age: 19}}},components: {ChildModule: ChildModule //注册局部子组件ChildModule也可以写成ChildModule:ChildModule},methods: {}
}
/script
子组件用props 数组来接收参数
templatediv{{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}/div
/template
script
export default {// 用props 数组来接收props: [mytitle, aa, bb, name, age]
}
/script
子组件用props对象来接收参数
templatediv{{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}--{{ isShow ? 是 : 否 }}/div
/template
script
export default {// 用props 数组来接收// props: [mytitle, aa, bb, name, age, isShow]props: {mytitle: String,aa: [String, Number], //表示此参数可以接收String和Number类型bb: { //还可以自定义校验参数required: true, //true 表示属性必传false 表示可以不传属性type: String, //表示属性只能是String类型的。也可以指定多个类型如type:[String,Number]default() {// 如果该参数没用值则指定一个默认值abc 也可以直接default: abc return abc},//也可以写成validator:value[success,warning,danger,error].indexOf(value)-1validator(val) {//检查参数的值是否是success或者warning或者danger或者error如果是则返回true,不是则返回false return [success, warning, danger, error].includes(val)}},name: String,age: Number,isShow: Boolean}
}
/script
下面列举了所有可能的数据类型
export default {props: {propA : String, //字符串类型propB : Number, //数字类型propC : Boolean, //布尔值类型propD : Array, //数组类型propE : Object, //对象类型propF : Date, //日期类型propG: Function, //函数类型propH: Symbol, //符号类型}
}
