Vue2 js将一些值从一个路径的输入传递到另一个路径，或者将数据属性从一个路径传递到另一个路径

在Vue.js中，可以通过props和事件来实现将数据从一个路径传递到另一个路径。

使用props传递数据：在父组件中，可以通过props属性将数据传递给子组件。子组件可以通过props接收父组件传递的数据，并在子组件中使用。这种方式适用于父子组件之间的数据传递。

示例代码：

// 父组件
<template>
  <div>
    <child-component :dataProp="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello from parent'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ dataProp }}</p>
  </div>
</template>

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

在上面的示例中，父组件通过props属性将parentData传递给子组件，并在子组件中使用dataProp接收并显示数据。

使用事件传递数据：在子组件中，可以通过$emit方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件可以通过监听子组件的自定义事件来接收数据。这种方式适用于子组件向父组件传递数据。

示例代码：

// 子组件
<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', 'Data from child');
    }
  }
};
</script>

// 父组件
<template>
  <div>
    <child-component @custom-event="handleData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleData(data) {
      console.log(data); // 输出：Data from child
    }
  }
};
</script>

在上面的示例中，子组件通过点击按钮触发sendData方法，并通过$emit方法触发了一个名为custom-event的自定义事件，并将数据'Data from child'作为参数传递给父组件。父组件通过监听子组件的自定义事件custom-event来接收数据，并在handleData方法中处理数据。

总结：