感觉自己即将完全步入前端大军，后台老板都不需要我弄了，塞翁失马。。。时间会告诉我们是好是坏
好了言归正传，最近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>
欢迎大家来讨论技术，相互学习