vue3(六)-基础入门之自定义组件与ref通信-编程知识

vue3(六)-基础入门之自定义组件与ref通信

一、全局组件

html:

<div id="app"><mytemplace></mytemplace>
</div>

javascript:

<script>const { createApp } = Vueconst app = createApp({})app.component('mytemplace', {template: '<div><button>返回</button></div>'}).mount('#app')
</script>

结果展示：

在这里插入图片描述

二、局部组件

局部组件只能在父组件中使用，其他组件无法使用该局部组件
父组件与子组件属性和方法不能共享

html:

<div id="app"><mytemplate></mytemplate>
</div>

javascript:

<script>const { createApp, ref } = Vueconst app = createApp({})app.component('mytemplate', {template:'<div> <input type="text" v-model="inputText" /><childTemplate @click="buttonClk"></childTemplate><ul><li v-for="item in myDataList">{{ item }}</li></ul></div>',data() {return {myDataList: ['123', '123qwe', 'aaa'],inputText: ''}},methods: {buttonClk() {console.log('自定义组件-父组件点击事件')}},components: {childTemplate: {template: '<button @click="childButtonClk">点击</button>',methods: {childButtonClk() {console.log('自定义组件-子组件点击事件')}}}}}).mount('#app')
</script>

1.结果展示：

在这里插入图片描述

2.点击按钮输出结果：

在这里插入图片描述

三、父组件与子组件之间的传参

1、父传子

父传子通过属性向下传递：在子组件中自定义属性名，并传递相应的参数过去。子组件通过 props 接受传过来的参数

<body><div id="app"><mytemplace mypros="传递固定参数"></mytemplace><mytemplace :mypros="parentProps"></mytemplace><mytemplace :mypros="parentProps" :mypros1="parentProps1"></mytemplace></div><script src="./lib/vue.global.js"></script><script>const { createApp } = Vueconst app = createApp({data() {return {parentProps: '传递动态参数属性前加冒号',parentProps1: true}}})app.component('mytemplace', {template: '<div><button>{{mypros+"-"+mypros1}}</button></div>',//属性校验，指定参数类型props: {mypros: String,mypros1: Boolean}// props: ['mypros', 'mypros1']}).mount('#app')</script>
</body>

子传父

子传父通过事件传递参数：子组件的点击事件通过 this.$emit(父组件中自定义的事件名称, 传递的参数) 传递参数到父组件；父组件通过自定义事件接收参数

<body><div id="app"><mytemplace @myevent="parentClick($event)"></mytemplace></div><script src="./lib/vue.global.js"></script><script>const { createApp } = Vueconst app = createApp({methods: {parentClick(e) {console.log('父组件点击:' + e)}}})app.component('mytemplace', {data() {return { childProp: '子组件属性' }},template: '<div><button @click="childClick()">返回</button></div>',methods: {childClick() {this.$emit('myevent', this.childProp)}}}).mount('#app')</script>
</body>

四、ref 通信

子组件(标签)中定义 ref 属性后，可以通过 this.$refs.ref属性名 获得子组件(标签)对象，从而获取子组件(标签)的控制权

<body><div id="app"><!-- 通过ref获取输入框的内容 --><input type="text" ref="myInputText" /><mytemplace ref="myRef"></mytemplace><button @click="parentClick">父组件点击事件</button></div><script src="./lib/vue.global.js"></script><script>const { createApp } = Vueconst app = createApp({data() {return { parentPro: 'refTest' }},methods: {parentClick() {this.$refs.myRef.childClick(this.parentPro)}}})app.component('mytemplace', {data() {return { childProp: '子组件属性' }},template: '<div><button @click="childClick()">返回</button></div>',methods: {childClick(e) {console.log('子组件点击事件', e)}}}).mount('#app')</script>
</body>