标签：vue app Vue 中父 传父 props 组件 data 属性
1.关于传值的规则
props值是对象的时候，传递的属性以对象的形式保存在props里面，对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则。
<div id="app">
<com1 :m="msg" :t="txt" :ind="90"></com1>
</div>
<script>
Vue.component("com1",{
template:`<div>
<p>{{m}}</p>
<p>{{t}}</p>
<p>{{ind}}</p>
</div>`,
props:{
// props值是对象的时候，传递的属性以对象的形式保存在props里面
// 对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则
m:{
required:true,//要求该属性必须传，不传就报错
},
t:{
type:Number,//类型是数字
default:200 //不传属性时默认为200，等同于函数的默认参数
},
ind:{
// validator自定义匹配规则
validator:function(v){
return v > 20
}
}
}
})
var app = new Vue({
el:"#app"
,data:{
msg:"你好",
txt:10
}
})
</script>2.父传子
父传子:通过自定义属性进行传值
1.在父组件使用子组件的时候，给子组件添加自定义属性，属性值为传递的数据
2.在子组件通过props接收父组件的数据，props值是数组，元素是自定义属性
3.使用的时候像data数据一样进行使用
<div id="app">
<p>{{msg}}</p>
<!-- 给组件添加的各种属性会直接作用于组件根节点上，直接与组件根节点的属性（类）进行合并 -->
<my-com :tt="msg" class="d1">
</my-com>
</div>
Vue.component("MyCom",{
template:`<div class="d2">
{{age}}
{{tt}}
</div>`,
data(){
return {
age:10
}
},
// 接受传递过来的数据,使用的时候可以直接像data一样进行使用
props:["tt"]
})
// 根组件
var app = new Vue({
el: "#app",
data: {
msg:"hello"
}
})3.子传父
子传父
1 在父组件定义修改方法，需要传递参数的
2 在使用子组件的时候通过自定义事件绑定修改方法
3 在子组件里面在需要的地方通过this.$emit("事件名","子组件数据")进行触发事件并且把子组件数据传递到父组件中
<div id="app">
<com @p="changeD1"></com>
{{d1}}
</div>
<script>
Vue.component("com", {
template: `<div>
<button @click="f1">点击传递数据</button>
</div>`,
data() {
return {
msg: {
txt: "明天出去玩",
name: "许美女"
},
age: 18
}
},
methods: {
f1() {
this.$emit("p", [this.msg, this.age])
}
},
})
var app = new Vue({
el: "#app",
data: {
d1: ""
},
methods: {
changeD1(e) {
this.d1 = e[0].name
console.log(this.d1);
}
},
})
</script>标签：vue,app,Vue,中父,传父,props,组件,data,属性 来源： https://blog.csdn.net/m0_54089303/article/details/121737098
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。