(四)新建一个简单的vue程序+vuex

1：在main.js里面添加自定义的Test.vue页面,Test.vue建在components下面

import { createApp } from 'vue'

//import App from './App.vue'

import App from './components/Test'

createApp(App).mount('#app1')

 

 2：Test.vue的内容(页面路径:src/components/Test.vue)

(1):定义了一个<say-hi/>组件,组件如果加了 - 这样的符号拼接的，下面的import SayHi，components: {SayHi；不能出现 - 这种符号, - 后面的字符串必须是大写，-去掉，不然会报错，例如<say-hi/>是组件，后面js就是SayHi才能和组件名称对应上

(2):下面主要做了3件事情，一个是引用组件：import sayAhi from './SayHi.vue'; 一个是挂载组件components: { sayAhi }；一个是调用组件<say-ahi/>；

就是(引用，挂载，调用)

(3):传一个msgs的值到SayHi.vue的页面里面去

<template>

  <div id="sty1">

    我来自Test.vue

    <say-ahi msgs="ffyy"/>

  </div>

</template>

 

<script>

 import sayAhi from './SayHi.vue';

   export default{

    name: "TestNamesys",

     components: {

           sayAhi

     }

   }

</script>

 

<style>

  #sty1{

    width: 200px;

    height: 200px;

    background-color: pink;

  }

</style>

 

3：SayHi.vue页面内容(页面路径:src/components/SayHi.vue)

(1):{{ msgs }}接受传过来的msgs值

(2):在data里面给message，my_value 的value变量赋值

(3):在methods里面定义show_my_value函数，@click="show_my_value()"调用函数

(4):在props指定组件传过来的msgs的值的的类型String为字符串类型

<template>

    <div class="sty2">

        <!-- 我来自SayHi.vue -->

        <p>{{ msgs }}</p>

        <p>{{ message }}</p>

        <button @click="show_my_value()">点击弹框</button>

    </div>

</template>

 

<script>

export default {

    data() {

        return {

            message: 'Hello~俺是SayHi',

            my_value : '弹出框内容'

        }

    },

    methods: {

        show_my_value: function(){

            alert('yes  ' + this.my_value);

        }

    },

   props: {

    msgs: String,

  },

}

</script>

 

<style>

    .sty2{

        width: 150px;

        height: 100px;

        background-color: rgb(177, 120, 231);

        color: white;

    }

</style>int

注意点:

Test.vue页面

如果文件是只包含一个大写字母的（如:Test.vue）,ESLint生成可能会报错，Component name "Test" should always be multi-word.eslintvue/multi-word-component-names

解决办法如下面代码：就是在export default {里面加 name:  'TestNamesys' 给他一个名称,呢个名称必须包含两个或者两个以上的大写字母,呢样就不会报错了

<script>

import SayAhi from "./SayHi.vue";

export default {

  name: "TestNamesys",

  components: {

    SayAhi,

  },

};

</script>

 

https://www.cnblogs.com/first-time/p/6815036.html

vuex把不同的组件的数据按一定的规则存到一个公共的地方，比如兄弟组件都可以在这个公共的地方取值,不用传来出去,或者是通过props来传，呢种当组件比较多的时候会比较麻烦