Vue基础篇(二)

vue组件之间的传值

• 父组件向子组件传值
• 子组件向父组件传值
• 兄弟组件之间相互传值或者是两个没有关系的组件之间的传值 一、Vue父子 组件之间传值
  vue使用中，经常会用到组件，好处是：
  1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；
  2、页面内容会简洁一些；方便管控；
  子组件的传值是通过props来传递数据，$emit触发事件；$on监听事件

一.父组件传到子组件
 1.父组件parent代码如下： 
  <template>
    <div class="parent">
      <h2>{{ msg }}</h2>
      <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
  </div>
  </template>
  <script>
  import son from './Son' //引入子组件
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
      }
    },
    components:{son},
  }
  </script>
 2.子组件son代码如下： 
  <template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
      }
    },
    props:['psMsg'],//接收psMsg值
  }
</script>
  3.效果图如下：

二.子组件向父组件传值
  通过绑定事件然后及$emit传值
  1.父组件parent代码如下
  <template>
    <div class="parent">
      <h2>{{ msg }}</h2>
      <p>父组件接手到的内容：{{ username }}</p>
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>  <!--绑定自定义事件transfer-->
    </div>
  </template>
  <script>
  import son from './Son'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
        username:'',
      }
    },
    components:{son},
    methods:{
      getUser(msg){
        this.username= msg
      }
    }
  }
  </script>
  2.子组件son代码如下： 
  <template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
      setUser:function(){
        this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
      }
    }
  }
  </script>
  三、通过Vuex状态管理传值
 1.通过npm加载vuex，创建store.js文件，然后在main.js中引入，store.js文件代码如下： 
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex);
  const state = {
    author:'Wise Wang'
  };
  const mutations = {
    newAuthor(state,msg){
      state.author = msg
    }
  }
  export default  new Vuex.Store({
    state,
    mutations
  })
  2.父组件parent代码如下： 
  <template>
    <div class="parent">
      <h2>{{ msg }}</h2>
      <p>父组件接手到的内容：{{ username }}</p>
      <input type="text" v-model="inputTxt">
      <button @click="setAuthor">传参</button>
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>
    </div>
  </template>
  <script>
  import son from './Son'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
        username:'',
        inputTxt:''
      }
    },
    components:{son},
    methods:{
      getUser(msg){
        this.username= msg
      },
      setAuthor:function () {
        this.$store.commit('newAuthor',this.inputTxt)
      }
    }
  }
  </script>
 3.子组件son代码如下： 
  <template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
      <p>这本书的作者是：{{ $store.state.author }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
      </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
      setUser:function(){
        this.$emit('transfer',this.user)
      }
    }
  }
  </script>