vue父子组件动态传值

父组件

<template>
  <div>
    <home-slider v-bind:sliderValue.sync="sliderValue" />
    <!-- 父组件中sliderValue随子组件slider值改变而改变 -->
    <div>{{sliderValue}}</div>
  </div>
</template>

<script>
import HomeSlider from './components/slider'
export default {
  name: 'Home',
  components: {
    HomeSlider,
  },
  data () {
    return {
      //设置滑块的初始值
      sliderValue: 50;
    }
  }
}
</script>

子组件

<template>
  <div>
    <div style="margin: 20px;">
      <van-slider v-model="value"
                  @change="onChange" />
    </div>
  </div>
</template>
<script>
import { Slider } from 'vant';
import { Toast } from 'vant';
export default {
  components: {
    [Slider.name]: Slider,
    [Toast.name]: Toast
  },
  props: ["sliderValue"],
  data () {
    return {
      value: this.sliderValue,
    };
  },
  watch: {
    sliderValue (newVal, oldVal) {
      this.value = newVal;
    },
    value (newVal, oldVal) {
      //滑块值更改传给父组件
      this.$emit("update:sliderValue", newVal);
    }
  },
  methods: {
    onChange (value) {
      Toast('当前值：' + value);
    },
  },
}
</script>

页面实现

其中vant的引入：

安装插件：npm i babel-plugin-import -D
在 babel.config.js 中配置：

//初始 plugins 为
"plugins": ["transform-vue-jsx", "transform-runtime"]

//添加配置
"plugins": ["transform-vue-jsx", "transform-runtime", [
    "import",
    {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }
  ]]

按需引入vant组件：

import { Slider } from 'vant';