vue-组件的使用
Posted hellohero55
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-组件的使用相关的知识，希望对你有一定的参考价值。
1、先在子组件里代码写好，然后再父组件里引用
父组件给子组件传值：如何传？
（1）首先再子组件中声明 props属性，让后数组中填入属性值，如 props:[‘msg‘,‘context‘,‘array‘]；多个属性
(2) 将这个属性用{{msg}}显示
(3)父组件中传值； 在子组件中 ：msg=值 ；这样就可以传过去了
<template>
<div>
<h1>{{msg}}</h1>
<p>{{context}}</p>
<ul>
<li :key="item.id" v-for="item in array">
{{item.name}}
</li>
</ul>
<el-button @click=‘$emit("alerts",5)‘>点击我有惊喜</el-button>
<!-- 插槽，预留内容 -->
<slot></slot>
</div>
</template>
<script>
export default {
props:[‘msg‘,‘context‘,‘array‘],
data() {
return {
}
},
created(){
},
methods: {
}
}
</script>
2、父组件中使用
<template>
<div id="createCard">
<childprops :msg="number" :context="context" :array="list" @alerts=‘clickMy($event)‘ >
<h3>我是插槽</h3>
</childprops>
</div>
</template>
<script>
import childprops from ‘@/views/demo/childProps.vue‘;
export default {
name: "actionCreate",
components: {
childprops, //使用子组件
},
data() {
return {
list:[{
id:1,
name:‘苹果‘
},{
id:2,
name:‘橙子‘
},{
id:3,
name:‘香蕉‘
}
],
test: true,
message:‘自定义组件显示‘,
context:‘这是很长很长一段话‘,
number:0,
};
},
methods:{
createTable(){
},
clickMy(numbers){
this.number+=numbers;
}
}
};
</script>
<style>
.current{
color: aquamarine;
}
</style>
以上是关于vue-组件的使用的主要内容，如果未能解决你的问题，请参考以下文章