标签：lis 添加 input default ems method imp 接受 ini
vue最强大的功能, 可以扩展html元素, 封装可充用的代码
在较高的层面, 组件是自定义元素, vue的编译器为他添加特殊功能, 在有些情况下, 组件也可以表现为用 ls 特性进行扩展了html元素
所有的vue组件同时也都是vue的实例, 所以可接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期的钩子
1), template
2), script
3), style
3部分组成
1), 使用
<template>
<div>
<p > 这儿是 子组件 </p>
</div>
</template>
<script>
export default {
name: "b02_son"
}
</script>
<style scoped>
</style>
父组件中接受
<script> // 导入子组件 import b02_son from ‘./b02_son‘ // 必须导出， 外部才可以访问 export default { name: "b01_component", components: { b02_son } } </script>
然后引用
<div>
<!--导入子组件-->
<b02_son/>
</div>
父 -> 子 传递数据
子 -> 父 相应事件
使用props 进行传递
使用 v-bind进行传递, 可简写为 : 的形式
父类中
<b02_son :title="msg" :lifemsg="lifemsg" :num="num" :obj="obj"/>
data() {
return {
msg: "传递给子的数据",
lifemsg: "hello",
num: 10,
obj: {
name: ‘vini‘,
age: 18
}
}
},
可传递动态数据, 通过v-mode绑定
<!--导入子组件-->
<input type="text" v-model.lazy="lifemsg">
<b02_son :title="msg" :lifemsg="lifemsg" :num="num" :obj="obj"/>
<button @click="changeMsg">button ..</button>
子类中接受
使用props 进行接受
1), 可限定类型, 可同时限制多个类型
2), 可设置默认值
3), 可设置必须
4), 返回为对象形式的话, 必须用function-return的形式
props: { // 增加必须项 title: { type: String, required: true, }, // 支持多种类型 lifemsg: [String, Number], // 带有默认值 num: { type: Number, default: 5, }, // obj 接收 obj: { type: Object, default: function () { return { name: ‘lisa‘, age: 27 } } } }
需要 @click 并且以函数的形式传递
子中进行绑定和传递, 使用emit传递给父
<template>
<div>
<div>
子给父传递数据
</div>
<div>
<button @click="sendMsg">传递数据</button>
</div>
</div>
</template>
<script>
export default {
name: "b03_emit",
data() {
return {
msg: "子组件数据",
}
},
// 绑定emit
methods: {
sendMsg(event) {
// key， value
this.$emit("sendMsg", this.msg)
}
}
}
</script>
<style scoped>
</style>
父中进行接受, 也以 函数 的形式进行接受
<!--子给父传递数据-->
<div>
<b03_emit @sendMsg="getMsg"/>
</div>
methods: {
getMsg(data) {
this.msg = data;
}
}
2), 父中的数据传递给子, 子计算后返回给父
<!--子给父传递数据-->
<div>
<b03_emit @sendAndCompute="sendAndGet" :num="getNum" />
<p> {{ result }}</p>
</div>
script:
data() { return { result: 10, } }, computed: { getNum() { return this.result - 0; } }, methods: { sendAndGet(data) { console.log("..." + data) this.result = data; } }
子中:
<div>
<!--<button @click="sendMsg">传递数据</button>-->
<button @click="sendAndCompute"> 计算数据 </button>
</div>
// 绑定emit, 返回给父 methods: { sendAndCompute(event) { this.$emit("sendAndCompute", this.computeNum) } }, // 接受来自父的数据 props: { num: { type: Number, required: true, } }, // 计算 computed: { computeNum() { return this.num * 3 } }
标签：lis 添加 input default ems method imp 接受 ini
原文地址：https://www.cnblogs.com/wenbronk/p/9681794.html
