南京高端品牌网站建设,会员系统免费版,设计素材网站p开头的,珠宝首饰商城网站建设定义组件 1. 在程序的 components 目录下新建一个名为 Child.vue 的文件 2. 在文件内键入如下代码 templatedivChild/div
/template
script
export default {name: Child
}
/script新建的 Child .vue 文件即为我们定义的组件…定义组件 1. 在程序的 components 目录下新建一个名为 Child.vue 的文件 2. 在文件内键入如下代码 templatedivChild/div
/template
script
export default {name: Child
}
/script新建的 Child .vue 文件即为我们定义的组件 文件的位置一般放在 src 目录下的 components 目录下 在App.vue文件内注册Child.vue组件
1. 首先将组件引入到 App.vue 文件内 import Child from ./components/Child 注意组件引入时不需要使用后缀名.vue 2. 在 App.vue 模块内添加一个名为 components 的属性 3. 将组件注册到 App.vue 文件内 components: { Child } 4. 在 template 标签内使用 Child 组件 Child / Vue组件之间的传值
父子组件通信 如何定义父子组件 将其他组件以import引入用自定义标签接收在当前组件中component里注册该标签页面上可以直接用自定义标签/自定义标签样子使用。当前组件为父组件被引入的组件为子组件。 父组件向子组件传值 一般在子组件内定义props来做接收 即 props: [ msg ] Child .vue 文件代码变更如下 定义好 props 之后我们可以在父组件传递 props 参数 templatedivh2子组件嵌套到一个页面的内部使用/h2接收到父组件传递的参数值b{{msg}}/bbr您的姓名是{{name}},年龄{{age}}br/div
/template
scriptexport default({name: Child,//定义属性其他页面调用该组件时可以通过属性名称返回值props:[msg,name,age]})
/script
父组件代码如下
templatedivh2父组件加载子组件/h2hr!--3.调用子组件,并且向子组件传递参数--Child msg父组件传递给子组件的参数 name张三 age20//div
/template
script
/*1.导入子组件
*/
import Child from ../../components/Child
export default ({name: Parent,//2.注册子组件components:{Child}
})
/script子组件向父组件传值 子组件通过调用 this.$emit() 方法向父组件传值 基本语法 this.$emit(func, param) func: 为父组件中绑定的函数名可自定义 param: 为要传递的参数 Child func”funcHandle” 其中 funcHandle 需在父组件中定义好相应的方法该方法接收一个或多个参数 funcHandle(val) { this.msg val } 子组件修改代码如下
this.$emit(parentFunc,this.title);父组件修改代码如下 Child msg父组件传递给子组件的参数 name张三 age20 parentFuncreceFunc/ methods:{ receFunc(val){ this.title val } } Child.vue完整代码
templatedivh2子组件嵌套到一个页面的内部使用/h2接收到父组件传递的参数值b{{msg}}/bbr您的姓名是{{name}},年龄{{age}}br标题input typetext v-modeltitleinput typebutton clicktest() value返回值给父组件/div
/template
scriptexport default({name: Child,//定义属性其他页面调用该组件时可以通过属性名称返回值props:[msg,name,age],data(){return {title:}},methods:{test(){//调用父组件的函数同时传回参数//parentFunc父组件的函数// alert(this.title)this.$emit(parentFunc,this.title);}}})
/script
parent.vue完整代码
templatedivh2父组件加载子组件/h2hr!--3.调用子组件,并且向子组件传递参数--Child msg父组件传递给子组件的参数 name张三 age20 parentFuncreceFunc/子组件返回的值是{{title}}h3 alignleft子组件传参给父组件的实现步骤/h3hrp alignleft1.在parent.vue文件定义接受函数:receFuncbr2.定义调用组件时的事件的名称parentFunc该名称自定义br3.在parent.vue文件调用子组件:lt;Child msg父组件传递给子组件的参数 name张三 age20 parentFuncreceFunc/gt;br4.在child.vue文件定义test函数,利用$emit方法调用函数:this.$emit(parentFunc,this.title);返回子组件的值br5.parentFun名称为自定义主要parent.vuechild.vue两边使用的名称一致即可/p/div
/template
script
/*1.导入子组件
*/
import Child from ../../components/Child
export default ({name: Parent,//2.注册子组件components:{Child},data(){return{title:}},methods:{receFunc(val){this.title val}}})
/script本人从事软件项目开发20多年2005年开始从事Java工程师系列课程的教学工作录制50多门精品视频课程包含java基础jspweb开发SSH,SSMSpringBootSpringCloud,人工智能在线支付等众多商业项目每门课程都包含有项目实战上课PPT及完整的源代码下载有兴趣的朋友可以看看我的在线课堂
讲师课堂链接https://edu.csdn.net/lecturer/893
