摘要:更推荐用和实现父子组件通信创建实例此时打印出组件继承使用基础构造器,创建一个子类。包含组件选项的对象创建构造器创建实例,并挂载到一个元素上。该对象包含可注入其子孙的属性。和绑定并不是可响应的。
关于组件名:
*组件名可以是kebab-case (短横线分隔命名)或者PascalCase (驼峰式命名) 当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。*
//在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中 Vue.component("my-component-name", { // ... 选项 ... })
const component = { template: ` `, data() { return { text: 123 } }, methods:{ } } const app = new Vue({ //el:"#root", components: { comp: component }, template: "", }).$mount("#root")
注意:组件的模板只能有一个根元素。下面的情况是不允许的。
template: `这是一个局部的自定义组件,只能在当前Vue实例中使用 hello`,
当我们定义这个 组件时,你可能会发现它的 data 并不是像这样直接提供一个对象:
data: { count: 0 }
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () { return { count: 0 } }
如果 Vue 没有这条规则,所有模板都会共享一份数据。
有些 HTML 元素,诸如
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
这个自定义组件 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
字符串 (例如:template: "...")单文件组件 (.vue)
Prop 类型
//普通类型 props: ["title", "likes", "isPublished", "commentIds", "author"]
//指定类型 props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
单项数据流,传递过后不能修改有两种常见的试图改变一个 prop 的情形:
//这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 props: ["initialCounter"], data: function () { return { counter: this.initialCounter } }
//这个 prop 以一种原始的值传入且需要进行转换 props: ["size"], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
Vue.component("my-component", { props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 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 ["success", "warning", "danger"].indexOf(value) !== -1 } } } })
类型:Vue instance
详细:
指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。
//定义一个父组件 const parent = new Vue({ name: "parent" }) //定义一个组件 const componet2 = { data () { return { text: 1 } }, mounted () { console.log(this.$parent.$options.name) //打印Root this.$parent.text = 1234; //也可以修改,节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信 } } //创建vue实例 new Vue({ parent: parent, name: "Root", el: "#root", mounted () { console.log(this.$parent.$options.name) //此时打印出"parent" }, components: { Comp: componet2 }, data: { text: 23333 }, template: ` {{text}} ` })
Vue.extend( options )使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
//包含组件选项的对象 const compoent = { props: { active: Boolean, propOne: String }, template: ` {{propOne}} see me if active `, data () { return { text: 0 } }, mounted () { console.log("comp mounted") }, methods: { handleChange () { this.$emit("change") } } } // 创建构造器 const CompVue = Vue.extend(compoent) // 创建 CompVue实例,并挂载到一个元素上。 new CompVue({ el: "#root", propsData: { //传递props属性 propOne: "xxx" }, data: { //可以覆盖或者合并 text: "123" }, mounted () { //不会覆盖 ,都会被调用 console.log("instance mounted") } })
// 1定义一个组件对象 const component = { props: ["value"], template: ` //绑定传递过来的value `, methods: { //向父组件触发事件 handleInput (e) { this.$emit("input", e.target.value) } } } //2定义一个实例 new Vue({ components: { CompOne: component }, el: "#root", data () { return { value: "123" } }, //接受事件并改变value进行属性传递 template: ` {{value}} ` })
const component = { // model: { // prop: "value1", // event: "change" // }, props: ["value"], template: ` `, methods: { handleInput (e) { this.$emit("input", e.target.value) } } } new Vue({ components: { CompOne: component }, el: "#root", data () { return { value: "123" } }, template: ` {{value}} //直接使用v-model绑定 ` })
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
import Vue from "vue" const component = { model: { prop: "value1", //绑定value1 event: "change"//绑定事件 }, props: ["value","value1"], template: ` `, methods: { handleInput (e) { this.$emit("change", e.target.value) } } } new Vue({ components: { CompOne: component }, el: "#root", data () { return { value: "123" } }, template: ` {{value}} ` })
兄弟间的组件传递:
1.使用vue官方提供的vuex(有一定难度,学习成本较大) 2.发布订阅模式(总线机制,Bus)
Document
const component = { template: ` //vue的默认组件,放置插槽的地方 `, data () { return { style: { width: "200px", height: "200px", border: "1px solid #aaa" }, value: "component value" } } } new Vue({ components: { CompOne: component }, el: "#root", data () { return { value: "123" } }, mounted () { }, template: ` this is contne //传递插槽内容 ` })
有些时候我们需要多个插槽,可以进行命名;
import Vue from "vue" const component = { template: ` //进行插槽命名 `, data () { return { style: { width: "200px", height: "200px", border: "1px solid #aaa" }, value: "component value" } } } new Vue({ components: { CompOne: component }, el: "#root", data () { return { value: "123" } }, mounted () { }, template: ` this is header ///向指定的内容 this is body ` })
可以在 标签内部指定默认的内容来做到这一点。
Submit
如果父组件为这个插槽提供了内容,则默认的内容会被替换掉。
import Vue from "vue" const component = { template: ` //向外传递的数据 `, data () { return { style: { width: "200px", height: "200px", border: "1px solid #aaa" }, value: "component value" } } } new Vue({ components: { CompOne: component }, el: "#root", data () { return { value: "123" } }, mounted () { console.log(this.$refs.comp.value, this.$refs.span) //打印出组件实例和HTML标签 }, template: ` {{value}} //此时没有作用域,访问到的不是组件内的value,而是外部的value //添加作用域,组件内部传递的数据都保存在props对象中 {{props.value}} ` })
Document change
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
import Vue from "vue" const ChildComponent = { template: "child component:", inject: ["yeye","value"], mounted () { console.log(this.$parent.$options.name) //上一级 console.log(this.yeye,this.value) //上上一级,接受到的数据,打印出上上一级的vue实例和123 } } const component = { name: "comp", components: { ChildComponent }, template: ` `, data () { return { style: { width: "200px", height: "200px", border: "1px solid #aaa" }, value: "component value", value2: "component222 value" } } } new Vue({ components: { CompOne: component }, provide () { //和data一样,可以调用相应的值,是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。 return { yeye: this, value:this.value } }, el: "#root", data () { return { value: "123" } }, mounted () { console.log(this.$refs.comp.value2, this.$refs.span) }, template: ` {{props.value}} ` })
provide 和 inject 绑定并不是可响应的。这是刻意为之的。provide 和 inject 绑定并不是可响应的。这是刻意为之的。
import Vue from "vue" const ChildComponent = { template: "child component:{{data.value}}", inject: ["yeye","data"], mounted () { console.log(this.$parent.$options.name) //上一级 console.log(this.yeye,this.value) //上一级 } } const component = { name: "comp", components: { ChildComponent }, // template: ` // // // // // // // // // `, template: ` `, data () { return { style: { width: "200px", height: "200px", border: "1px solid #aaa" }, value: "component value", value2: "component222 value" } } } new Vue({ components: { CompOne: component }, provide () { //和data一样,可以调用相应的值 const data = {} // es5双向绑定实现原理 Object.defineProperty(data, "value", { get: () => this.value, //获取最新value,每次调用value相当于get()方法 enumerable: true //可读取 }) return { yeye: this, // value:this.value data } }, el: "#root", data () { return { value: "123" } }, mounted () { console.log(this.$refs.comp.value2, this.$refs.span) }, template: ` {{props.value}} ` })
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
参考:渲染函数&JSX
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96843.html
摘要:更推荐用和实现父子组件通信创建实例此时打印出组件继承使用基础构造器,创建一个子类。包含组件选项的对象创建构造器创建实例,并挂载到一个元素上。该对象包含可注入其子孙的属性。和绑定并不是可响应的。 组件注册 关于组件名: *组件名可以是kebab-case (短横线分隔命名)或者PascalCase (驼峰式命名) 当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必...
摘要:哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码,加入群聊,一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话,现在公司的现状是码农太多,但能独立带队的人太少,简而言之,不缺干 ? 哪吒社区Java技能树打卡 【打卡贴 day2...
摘要:就是实例中的对象当前组件接收到的对象。当前组件数的根实例如果当前实例没有父实例,此实例将会是其自己当前实例的直接子组件。 vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象。作为参考,你也可以在 api/#选项-数据 文档 中浏览完整的选...
摘要:此时还未有选项钩子函数和间的生命周期完成后,会有一个判断过程,判断对象是否有选项。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变,会触发对应组件的重新渲染,先后调用和钩子函数。和钩子函数间的生命周期钩子函数在实例销毁之前调用。 vue生命周期 这是vue生命周期的图示具体内容:showImg(https://segmentfault.com/img/bV4xju?w=1200&...
摘要:指令指令带有前缀,以表示它们是提供的特殊特性。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖,会扩展成一个更新父组件绑定值的侦听器。 vue指令 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本,更新元素的 innerHTML 。注意:内...
阅读 2159·2021-11-19 09:55
阅读 2593·2021-11-11 16:55
阅读 3122·2021-09-28 09:36
阅读 1873·2021-09-22 16:05
阅读 3209·2019-08-30 15:53
阅读 1774·2019-08-30 15:44
阅读 2868·2019-08-29 13:10
阅读 1309·2019-08-29 12:30