vuebase-2.Props的验证组件的深入

Posted 2020-11-10 星雨，恒奋斗，过客

1.new实例根目录的数据，其他组件可以随时访问，但是不推荐

2.通过computed方法访问new实例根目录的数据

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
data:{msg:"vue.root"},
components: { App },
template: ‘<App/>‘
})

child.vue

<template>
<div class="child">
子组件：
<ul>
<li v-for="item in friends">{{item}}</li>
</ul>
{{title}}--{{age}}---{{nick}}---{{parentss}}<button @click="sendParent" type="button">改变子组件向父组件传递数据的按钮</button>
{{gemsgInfo}}
</div>
</template>

<script>
export default{
name:"child",
//props:["title","age"],
props:{
title:String,
age:Number,
nick:{
type:String,
default:"大宝贝"
},
parentss:{
type:String,
required:true
},
friends:{
type:Array,
default:function(){
return ["大宝贝闺蜜","大宝贝闺蜜1","大宝贝闺蜜2","大宝贝闺蜜3"]
}
}
},
data(){
return{

}
},
methods:{
sendParent(){
this.$emit("sendParentinfo","这个是子组件的数据");
}
},
computed:{
gemsgInfo(){
return this.$root.msg
}
}
}
</script>

<style lang="css" scoped>
</style>

3.操作原生dom

<template>
<div>vue.乐
<p class="" ref="p1">p元素</p>
<input type="text" ref="msginput">
<button @click="getmsg" type="button">get</button>
</div>
</template>
<script>
export default{
name:"music",
data(){
return{

}
},
mounted(){
this.$refs.p1.innerhtml="改变后的p元素"
this.$refs.msginput.value="msg"
console.log(this.$refs.p1);
},
methods:{
getmsg(){
console.log(this.$refs.msginput.value)
}
}
}
</script>
<style lang="css" scoped>
</style>