vue项目常用

元素里三元运算符,判断是否要加类:

//语法
<p :class="条件?'成立':不成立">内容</p>
//实例
<span :class="color == 0 ? 'cen_box_m_t_span' : ''">账户密码登录</span>

父传子:

父:

<Son :num="num"></Son>

data() {
    return {
      num: "123",
    };
  },

子:

<p>{{num}}</p>
export default {
    props:['num'],
}

子传父:

父:

在子标签中设置自定义事件下面叫fn,触发一个函数

<Son @fun='fn'></Son>
export default {
  data() {
    return {
      bool:false
    };
  },
  methods:{
      fn(val){
          this.bool = val
      }
  }
};

子:

this.$emit('fn','你要传递的数据')

<button @click="setValue">点击</button>
export default {
    methods:{
        setValue(){
            this.$emit('fun','传递的数据')
        }
    }
}

 css样式导入scss:

先下载scss,然后再style标签引入:

<style lang='scss'></style>

让css只在当前组件起作用

在组件中的style前面加上scoped

递归:

可以赋值直接用

父:

父向子传递数据

<template>
  <div>
    <!-- 树形菜单 -->
    <TreeBook :data="tree"></TreeBook>
  </div>
</template>
<script>
var tree = [
  //一级
  {
    name: "北京",
    list: [
      { name: "昌平", list: [{ name: "南口" }] },
      {
        name: "朝阳",
      },
      { name: "海淀", list: [{ name: "中关村" }, { name: "上地" }] },
    ],
  },
  {
    name: "河北",
    list: [
      { name: "保定", list: [{ name: "涞水", list: [{ name: "东旺乡" }] }] },
      {
        name: "唐山",
        list: [
          {
            name: "遵化",
            list: [{ name: "遵化村", list: [{ name: "铁路小区" }] }],
          },
        ],
      },
      { name: "廊坊" },
    ],
  },
];
import TreeBook from './TreeBook.vue'
export default {
    //为什么是函数?为了避免冲突和覆盖
    data(){
        return{
            tree,
        }
    },
    components:{TreeBook}
};
</script>

子:

子组件调用自身时不用再次引入自身,必须写终止条件

<template>
  <div>
    <ul v-for="item in data" :key="item.name">
      <li>
        <p>{{ item.name }}</p>
        <!-- 递归的核心 -->
        <TreeBook v-if="item.list" :data='item.list'></TreeBook>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  //vue的递归组件[必须]要有name,切name值必须和文件名相同,[数据源]一定来自上有组件
  name: "TreeBook",
  props: ["data"],
};
</script>

 ref获取dom元素:

<template>
  <div>
    <p ref='p'></p>
    <button @click='fn()'>点击</button>
  </div>
</template>

<script>
export default {
  methods:{
    fn(){
       console.log(this.refs.p)
    }
  }
};
</script>

<style>
</style>