1, the first code is written in the sub-components, and then again in reference to the parent component
Parent component sub-assemblies to pass value: how to pass?
(1) First sub-assembly and then declared props attribute, attribute value so that the array is filled, such as props: [ 'MSG', 'context', 'Array' ]; a plurality of attributes
(2) with this attribute display {{msg}}
(3) parent components pass value; the subassembly: msg = value; this can pass passed
<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, parent components used
<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,
}, {'apple'
name:
2
the above mentioned id:,
Name: 'orange'
}, {
ID: . 3 ,
name: 'banana'
}
],
Test: to true ,
Message: 'custom component display' ,
context: 'This is a very long passage' ,
Number: 0 ,
};
},
Methods: {
the createTable () {
},
clickMy (Numbers) {
the this .number + = Numbers;
}
}
};
</ Script>
<style>
.current {
Color: Aquamarine;
}
</style>