标签：uniapp onClickImg img 自定义 src export 组件 imgBorder

一、自定义组件使用方式：

1.编写组件img-border.vue

<template>
        <image class="img" :src="src" @click="onClickImg"></image>
</template>

<script>
    export default{
        props:{
            src:String
        },
        methods:{
            onClickImg(){
                this.$emit('onClick',this.src)
            },
        }
    }
</script>

<style>
    image.img{
        display: block;
    }
</style>

2.注册并使用组件

<template>
    <view class="content">
    　　<!-- 使用组件 -->
        <img-border src="../../static/image/logo.png" @onClick="onClickImg"></img-border>
    </view>
</template>

<script>
　　import imgBorder from "@/components/img-border";  //引入组件
　　export default {
　　　　components: {  //注册组件
　　　　　　imgBorder
　　　　},
　　　　methods: {
　　　　　　onClickImg(e) {
　　　　　　　　//点击子组件
　　　　　　　　console.log(e)
　　　　　　},
　　　　},
　　}
</script>

注意：组件名称和组件值相同可以省略只写一个（原来格式：imgBorder：imgBorder）

二、组件间传值

引入组件的叫父组件，被引入的叫子组件

（1）父向子传值，通过属性的方式

父组件向子组件img-border通过属性名src传递一个字符串，子组件通过props进行接收数据

<!-- 父组件 -->
<img-border src="../../static/image/logo.png"></img-border>

<!-- 子组件 -->
<template>
    <image class="img" :src="src" ></image>
</template>
<script>
    export default{
        props:{
            src:String
        },
    }
</script>

（2）子向父传值，通过触发事件的方式

子组件通过$emit()触发事件的方式向父组件传递数据，父组件通过监听事件的方式来接收数据

<!-- 子组件 -->
<image class="img" :src="src" @click="onClickImg"></image>

export default{
　　methods:{
　　　　onClickImg(){
　　　　　　this.$emit('onClick',this.src)
　　　　},
　　}
}

<!-- 父组件 -->
<img-border src="../../static/image/logo.png" @onClick="onClickImg"></img-border>

onClickImg(e) {
    //点击子组件
    console.log(e)
},

标签：uniapp,onClickImg,img,自定义,src,export,组件,imgBorder
来源： https://www.cnblogs.com/czhowe/p/16672191.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。