vuejs 单文件组件.vue 文件的使用

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <h2>Essential Links</h2>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

<style scoped>
h1, h2 {
 font-weight: normal;
}

ul {
 list-style-type: none;
 padding: 0;
}

li {
 display: inline-block;
 margin: 0 10px;
}

a {
 color: #42b983;
}
</style>

new Vue({
 el: '#app',
 data: {
    msg: "hello Vue"   
 } 
})

<template>
 <div class="hello">
  <input type="txet" placeholder="请输入文字" v-model="msg" @keypress.enter="enter">
  <p>{{upper}}</p>
 </div>
</template>

<script>
export default {
 data () {
  return {
   msg: 'hello'
  }
 },
 methods:{
  enter () {
   alert(this.msg);
  }
 },
 computed: {
  upper () {
   return this.msg.toUpperCase();
  }
 }
}
</script>

<style scoped>
 input {
  width: 200px;
  height: 20px;
 }
 p {
  color: red;
 }
</style>

<template>
 <div id="app">
  <img src="/UploadFiles/2021-04-02/logo.png">

Hello.vue组件，这里还是把项目中自带的Hello.vue 清空，自己写，变成如下内容


<template>
 <div class="hello">
  <p>{{mesFather}}</p>
 </div>
</template>

<script>
export default {
 props:['mesFather']
}
</script>



这时，在页面中看到 message from father 字样，父元素向子元素传递数据成功。
子组件向父组件传递数据，需要用到自定义事件。 例如，我们在Hello.vue ，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。
在 Hello.vue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter, 整个Hello.vue 文件如下


<template>
 <div class="hello">
  <!-- 添加一个input输入框 添加keypress事件-->
  <input type="text" v-model="inputValue" @keypress.enter="enter">
  <p>{{mesFather}}</p>
 </div>
</template>

<script>
export default {
 props:['mesFather'],

 // 添加data, 用户输入绑定到inputValue变量，从而获取用户输入
 data: function () {
  return {
   inputValue: '' 
  }
 },
 methods: {
  enter () {
   this.$emit("valueUp", this.inputValue) 
   //子组件发射自定义事件valueUp, 并携带要传递给父组件的值，
   // 如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); 
  }
 }
}
</script>




在App.vue 中， template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个 p 元素，用于展示子组件传递过来的数据，<p>子组件传递过来的数据 {{ childMes }}</p>
相应地，在scrpit中，data 中，定义一个变量childMes, 并在 methods 中，定义一个事件处理函数reciever。整个App.vue修改如下：


<template>
 <div id="app">
  <img src="/UploadFiles/2021-04-02/logo.png">

这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。
当在input输入框中输入数据，并按enter键时，它会触发keypress.enter事件，从而调用事件处理函数enter， 在enter 中， 我们发射了一个事件valueUp， 并携带了一个参数，由于在<hello @valueUp=”recieve”></hello> 组件中， 我们绑定valueUp 事件，所以父组件在时刻监听valueUp 事件， 当子组件发射value 事件时，父组件立刻捕获到，并立即调用它的回调函数receive, 在receive 中，我们获取到子组件传递过来的数据，并赋值了data 中的变量childMes, 由于data 数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。
其实在子组件中， props 最好的写法是props 验证，我们在子组件Hello.vue中写 props:['mesFather'], 只是表达出，它接受一个参数mesFather, 如果写成props 验证，不仅能表达出它需要什么参数，还能表达参数类型，并且如有错误，vue 会做出警告。现在把props 改成props 验证的写法, Hello.vue 中的js中的props修改如下：


props： {
   'mesFather': {
     type: String,
     default: 'from father',
     required:true
   }
 }


如果是组件与组件之间的通信非常复杂，不光是父子组件，还有兄弟组件，那就需要用到状态管理，vuex
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。