感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马。。。时间会告诉我们是好是坏
好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧
----------------------------------------------------------------------
1.父组件如何向子组件传参数
<div id="app"> <!-- 传递静态值 --这里firstBlood为什么要写成first-blood上一篇已经说明 --> <son-demo first-blood="参数值"></son-demo> <!-- 传递动态值 --> <son-demo :first-blood="giveSon"></son-demo> <!-- 如果要直接传递Boolean值 --这里的true会被直接解析成true而不是字符串 --> <son-demo :first-blood="true"></son-demo> </div> <script type="text/x-template" id="sonModel"> <h1>{{firstBlood}}</h1> </script> <script> //定义子组件 var sonDemo = { template: "#sonModel", props:['firstBlood'], data(){ return {}; }, } //父组件 new Vue({ el: '#app', components: { sonDemo //也可以这样写 sonDemo: sonDemo }, data: { giveSon:'给儿子的值' } }); </script>
注意:vue不推荐直接在子组件中修改父组件传来的props的值,会报错
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "" (found in component )
如果要修改,在子组件里定义一个新变量来接收↓
data(){
return { getFirstBlood: this.firstBlood //通过data, 定义新变量getFirstBlood, 这样getFirstBlood的值变更时,不会影响父组件传来的firstBlood的值
}
}
还有如果传递的参数是数组类型的话,子组件是可以直接对其进行操作的,同时父组件里的数组也会跟着变,如果不想污染初始值最好还是新定义一个变量接收
2.父组件向子组件传值时对传递的参数进行类型验证,如果没传给个默认值
type 可以是下列原生构造函数中的一个:String、Number、Boolean、Array、Object、Date、Function、Symbol
<div id="app"> <!-- 传递动态值 --> <son-demo :show-or-del="isshow" :first-blood="giveSon"></son-demo> </div> <script type="text/x-template" id="sonModel"> <h2 v-if="showOrDel"></h2> <h1>{{firstBlood}}</h1> </script> <script> //定义子组件 var sonDemo = { template: "#sonModel", props: { showOrDel: { type: [Boolean, Number], required: true }, firstBlood: { type: String, required: '默认值' } }, data(){ return {}; }, } //父组件 new Vue({ el: '#app', components: { sonDemo //也可以这样写 sonDemo: sonDemo }, data: { isshow: false, giveSon:'给儿子的值' } }); </script>
3.子组件如何向父组件传递参数 关键词$emit
<div id="app"> <son-demo @giveFatherInfo="getSonInfo"></son-demo> </div> <script type="text/x-template" id="sonModel"> <button @click="giveDad">点击给父亲传值</button> </script> <script> //定义子组件 var sonDemo = { template: "#sonModel", data(){ return { idValue:'123445' }; }, methods: { giveDad(){ this.$emit('giveFatherInfo', this.idValue); } } } //父组件 new Vue({ el: '#app', components: { sonDemo //也可以这样写 sonDemo: sonDemo }, data: { userid: '' }, methods: { getSonInfo(v) { this.userid = v; }, }, }); </script>
欢迎大家来讨论技术,相互学习?