Vue自定义组件属性传值

定义一个组件，其中
props表示调用方通过属性绑定传入的参数

<template><div>{{ imgList }}</div>
</template><script>
export default {name: "MyCarousel",props: {imgList: String}
}
</script>

调用方通过**:属性名**进行属性绑定

<template><div class="about"><MyCarouse :imgList="imgLists"></MyCarouse></div>
</template><script>
import MyCarouse from '../components/MyCarousel'
export default {name: 'About',components: {MyCarouse},data() {return{imgLists:"12345678"}}
}
</script>

注意属性绑定的两种写法

<!-- 完整语法 -->
<a v-bind:href="url">...</a><!-- 缩写 -->
<a :href="url">...</a>

当然类似的也有事件绑定简写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a><!-- 缩写 -->
<a @click="doSomething">...</a>

Vue自定义组件属性传值相关推荐

Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...
Vue自定义组件与Vue组件组件传值
一.Vue自定义组件组件是可复用的 Vue 实例,且带有一个名字.组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对 ...
如何运用Vue自定义组件以及组件的传值
Vue自定义组件引入组件首先在项目内的components新建.vue文件. 创建完成之后搭建完整的框架.其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
Vue自定义组件 Vue.component
Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教 ...
vue 自定义组件切换时刷新
我们在使用vue自定义组件时,常常会遇到切换组件的操作,但是切换组件的时候,如果没有处理好,组件内容就不会刷新.如:标签页下放自定义组件,切换标签时,组件里面的内容不刷新,导致页面停留在上一次的操作. ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...

Vue自定义组件属性传值

Vue自定义组件属性传值相关推荐

最新文章

热门文章