一文淺析Vue中父子組件間傳值問題

vue父子元件之間怎麼傳值？以下這篇文章帶大家了解Vue中父元件以及子元件傳值問題，希望對大家有幫助！

前言：在一些頁面中不單單的純純的一個vue文件，vue講究組件化開發，但是一般的肯定會產生交互事件，今天了解了這個傳值，特此的來記錄一下。

一.父元件傳送值

#父元件傳送值給子元件會用到：Prop，一般的我們需要在子元件中進行相關的聲明，如下所示：

子元件為HellowWorld.vue##

<script>export default {
  name: &#39;HelloWorld&#39;,
  //接收的变量
  props: {
  //声明相关的类型
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
  }}</script>

在父元件App.vue中

<template>
  <div>
    <!-- msg为字符串类型，count为数字，options为数组 -->
    <helloworld></helloworld>
  </div></template><script>//引入组件import HelloWorld from &#39;./components/HelloWorld.vue&#39;export default {
  name: &#39;App&#39;,
  components: {
    HelloWorld  },
  data(){
    return{
      count:0,
      options:[],
    }
  },
  methods:{
  }}</script>

那麼在頁面上效果就是：
##當然我們也可以寫一些事件來進行動態的資料交互，例如：

#二.子元件傳送值

##在子元件傳值時會用到$emit，值得注意的是：在子元件傳值時候的方法要與父元件中監聽的方法名稱相同，也就是範例中的listenToChild。 【相關推薦：

vuejs影片教學###、###web前端開發###】##########Helloworld.vue子元件：######

<template>
  <div>
    <!-- 文字信息 -->
    <h1 id="msg">{{ msg }}</h1>
    <!-- 数字信息 -->
    <h2 id="count">{{count}}</h2>
    <!-- 渲染数组信息 -->
    <ul>
      <li>{{item}}</li>
    </ul>
    <!-- 进行传值 -->
    <button>点击</button>
  </div></template><script>export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
    SendMsg(){
      // listenToChild  注意
      this.$emit(&#39;listenToChild&#39;,this.options)
    }
  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style>h3 {
  margin: 40px 0 0;}ul {
  list-style-type: none;
  padding: 0;}/* li {
  display: inline-block;
  margin: 0 10px;
} */a {
  color: #42b983;}</style>

##### ##App.vue父元件：######

<template>
  <div>
    <img  src="/static/imghwm/default1.png" data-src="./assets/logo.png" class="lazy" alt="一文淺析Vue中父子組件間傳值問題" >
    <!-- listenToChild 为子组件传来的方法 -->
    <helloworld></helloworld>
    <button>+</button>
    <button>置零</button>
    <button>-</button>
    <ul>
      <li>{{index}}，{{item}}</li>
    </ul>
  </div></template><script>import HelloWorld from &#39;./components/HelloWorld.vue&#39;export default {
  name: &#39;App&#39;,
  components: {
    HelloWorld  },
  data(){
    return{
      // 要传去子组件的参数
      count:0,
      options:[],
      // 子组件传来的参数
      data:[]
    }
  },
  methods:{
    Add(){
      this.count=Number(this.count)+1
      this.options.push(&#39;添加一次，当前数值为：&#39;+this.count)
    },
    Sub(){
     
      if(this.count<=0){
        this.options.push(&#39;当前数值不能变化了&#39;+this.count)
      }else{
        this.count=Number(this.count)-1
       this.options.pop()
      }
       
    },
    show(data){
      console.log(data)
      this.data=data    },
    restart(){
      this.count=0
      this.options=[]
    }
  }}</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;}button{
  margin: 20px;}ul {
  list-style-type: none;
  padding: 0;}</style>

#######效果：################（學習影片分享：###vuejs入門教學# ##、###程式設計基礎影片###）###

以上是一文淺析Vue中父子組件間傳值問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！