[JavaScript知识库]vue--props接收组件传递的标签上的值并操作这个值

组件标签上的自定义属性值的传递

问题：标签上普通传值只会传递的值的类型只会时字符串的值

如果要得到number类型的值：
方法一：接收端值用乘法*1
方法二：用v-bind或简写绑定该标签属性：表示意思时传递的值是运行冒号里面的js表达式执行的结果

方法三: props接收后赋值到data()的返回值里，然后就可以执行numbeter相关的方法了

student组件：接收值的组件

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名: {{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生年龄:{{myAge}}</h2>
    <button @click="updateAge">尝试修改到的年龄</button>
    <button @click="getStudCom">输出该组件的值</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  //data里面和props中都可以放数据,如果重复了,优先级更高的是props!!!
  data() {
    return{
      msg: '我是一名学生',
      myAge:this.age
    }
  },
  props: ['name','sex','age'],

  methods: {
    updateAge(){
      this.myAge ++
    },
    getStudCom(){
      console.log(this)
    }
  }

//  接收同时对数据进行类型限制

//   props: {
//     name: String,
//     age: Number,
//     sex: String
//   }

  //

  // props: {
  //   name: {
  //     type:String,//name的类型是字符串
  //     required: true
  //   },
  //   age: {
  //     type:String,//name的类型是字符串
  //     required: true,
  //     default: 99
  //   },
  //   sex: {
  //     type:String,//name的类型是字符串
  //     required: true
  //   }
  // }

}
</script>

<style scoped>

</style>

App组件：传递值的组件

<template>
<div id="app">
<!--  这些都要在id="app"的里面，才会有下面的style-->
  <h1>Vue-Router</h1>
  <router-link to="/main">首页</router-link>
  <router-link to="/content">内容页</router-link>
  <router-link to="/kuang">李白</router-link>
  <!--  router-view就是要展示组件的地方-->
  <router-view></router-view>
  <!--  点击后会去找main.js,main.js配置了router，然后会去到router包下的index.js里面-->
<!--ref 和id一样可以拿到dom值-->
  <h1>-----------------ref得到dom或者组件------------------</h1>
  <h1 v-text="msg" ref="title" id="title_id"></h1>
  <button @click="showDom">点我输出上方的DOM元素</button>
  <Content ref="comp"></Content>
  <h1>-----------------props传递  并操作组件标签上传递过来的值------------------</h1>
  <Student name="李四" age="18" sex="女"/>

</div>

</template>

<script>
import Content from "./components/Content";
import Student from "./components/Student";

export default {
  name: 'App',
  components: {Content,Student},
  data(){
    return{
      msg: '欢迎学习vue!'
    }
  },
  methods: {
    showDom(){
      console.log(this)
      // ref 和id一样可以拿到dom值
      console.log(this.$refs.title)
      console.log(document.getElementById('title_id'))
      console.log(this.$refs.comp)
    }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

记住props传过来的数据不能直接改，会有警告：

当vue里面：data()里面和props中都可以放数据,如果重复了,优先级更高的是使用data()里面的值!!!

所以可以把值传递给data()