【VUE】vue基础知识（二）

一，Vue.js双向数据绑定

Vue.js 的双向数据绑定是其核心特性之一，它使得视图和数据之间能够实现实时同步。在 Vue 中，双向数据绑定主要是通过 v-model 指令来实现的。

双向数据绑定比单向数据流强在哪？

1. 单向数据流：Vue.js 的数据流是单向的，即数据从父组件流向子组件。子组件通过 props 接收父组件传递的数据，然后通过事件将数据反馈给父组件。
2. 双向数据绑定：在某些场景下，我们可能需要子组件修改父组件传递的数据。这时，我们可以使用 v-model 指令来实现双向数据绑定。当子组件内部状态变化时，可以通过 $emit 触发一个事件，将变化传递给父组件。

实例

来一个简单的 Vue 双向数据绑定实例帮助理解：
vue

<template>  
  <div>  
    <input v-model="message" type="text">  
    <p>输入的内容是: {{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: ''  
    };  
  }  
};  
</script>

在这个例子中，我们有一个输入框和一个段落。输入框的值通过 v-model 指令与 message 数据属性进行双向绑定。当用户在输入框中输入内容时，message 的值会自动更新。同时，由于 message 绑定了段落的内容，所以当 message 的值发生变化时，段落的内容也会相应地更新。这就是 Vue 的双向数据绑定的基本原理。

二、Vue的组件化

Vue的组件化主要体现在以下几个方面：

1. 组件的独立性和可复用性：Vue的组件化设计使得每个组件都具有独立的功能和逻辑，同时这些组件可以在不同的地方重复使用。这种设计方式不仅提高了代码的复用性，也使得代码更加易于维护和扩展。
2. 组件间的通信和数据共享：在Vue中，组件之间可以通过props和事件进行通信和数据共享。props用于从父组件向子组件传递数据，而事件则用于子组件向父组件发送数据或通知。这种通信机制使得组件之间的数据流动更加清晰和可控。
3. 组件的自定义和扩展：Vue提供了丰富的API和指令，使得开发者可以自定义和扩展组件的功能。例如，可以使用slot和component来定义组件的插槽和子组件，从而实现更加灵活和可扩展的组件化设计。

应用

在应用方面，Vue的组件化可以应用于各种场景。例如，在构建单页面应用时，可以将页面拆分成多个组件，每个组件负责一部分功能，这样不仅可以提高开发效率，也使得页面的维护和扩展更加容易。另外，在构建大型应用时，可以将功能模块拆分成多个独立的组件，这样可以提高代码的可维护性和可重用性。

总之，Vue的组件化设计使得开发者可以更加高效地构建和维护复杂的Web应用。

三、Vue的组件化

Vue的组件化代码主要由以下几个部分组成：

1、组件的注册：

在Vue中，组件可以通过全局注册或局部注册的方式进行注册。全局注册需要在Vue实例化之前使用Vue.component()方法进行注册，而局部注册则需要在组件所在的组件中直接使用components属性进行注册。

javascript

// 全局注册  
Vue.component('my-component', {  
  template: '<div>这是我的组件</div>'  
});  
  
// 局部注册  
export default {  
  components: {  
    'my-component': {  
      template: '<div>这是我的组件</div>'  
    }  
  }  
};

2、组件的使用：

在模板中使用组件时，需要使用标签并指定组件名。如果组件需要接收数据或传递事件，则可以通过props和事件进行传递。

html

<template>  
  <div>  
    <my-component :message="message" @click="handleClick"></my-component>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    };  
  },  
  methods: {  
    handleClick() {  
      this.message = 'Hello, World!';  
    }  
  }  
};  
</script>

3、✨组件的通信：

组件之间的通信可以通过props和事件来实现。props用于从父组件向子组件传递数据，而事件则用于子组件向父组件发送数据或通知。在子组件中，可以通过this.$emit()方法触发事件并传递数据给父组件。在父组件中，可以通过v-on指令或@简写方式监听子组件的事件并执行相应的处理函数。

父子组件间的传递参数，非常非常非常重要，请务必好好理解并实践！
Vue父子组件传值的具象实例：

父组件：
vue

<template>  
  <div>  
    <h2>父组件</h2>  
    <input type="text" v-model="message">  
    <button @click="sendMessage">发送消息</button>  
    <!-- 页面上使用组件 -->
    <child-component :child-message="message" @child-event="handleChildEvent"> </child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  // 导入组件
  
export default {  
  components: {  
    'child-component': ChildComponent  // 注册组件
  },  
  data() {  
    return {  
      message: ''  
    };  
  },  
  methods: {  
    sendMessage() {  
      this.$refs.childComponent.receiveMessage(this.message);  
    },  
    handleChildEvent(payload) {  
      console.log('收到子组件事件：', payload);  
    }  
  }  
};  
</script>

子组件：
vue

<template>  
  <div>  
    <h3>子组件</h3>  
    <p>{{ childMessage }}</p>  
    <button @click="sendEvent">发送事件</button>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
  // 接收值
    childMessage: {  
      type: String,  
      default: ''  
    }  
  },  
  methods: {  
    receiveMessage(message) {  
      console.log('收到父组件消息：', message);  
    },  
    sendEvent() {  
      this.$emit('child-event', 'Hello from child!');  
    }  
  }  
};  
</script>

在这个例子中，父组件通过v-model绑定了一个输入框，用于输入要传递给子组件的消息。同时，父组件还包含了一个按钮，用于触发sendMessage方法，
该方法通过$refs访问子组件实例，并调用子组件的receiveMessage方法将消息传递给子组件。

在子组件中，通过props接收父组件传递的消息，并在模板中显示。同时，子组件还包含了一个按钮，用于触发sendEvent方法，该方法通过$emit触发一个名为child-event的事件，并将一个字符串作为事件的载荷发送给父组件。

在父组件中，通过@child-event监听子组件的事件，并在控制台中打印出事件载荷。

总结，Vue的组件化代码主要由组件的注册、使用和通信三部分组成。通过合理地组织和使用组件，可以提高代码的可维护性和可重用性，从而构建更加高效和灵活的Web应用。