六十六、vue组件

vue组件

  • 一 组件基础
    • 1.1 定义全局组件
    • 1.2 定义局部组件
  • 二 组件通信
    • 2.1 父子通信之子传父
    • 2.2 父子通信之父传子
    • 2.3 ref属性
  • 三 动态组件

一 组件基础

1.1 定义全局组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
body>
<script>
    Vue.component('button-counter',{
        template:`
        
        `,
        data(){
            return {
                count:0
            }
        }
    })
    let vm = new Vue({
        el: '#app',
        data: {},
    })
script>
html>

在这里插入图片描述

1.2 定义局部组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">
<navbar>navbar>
div>
body>
<script>
Vue.component('navbar', {
    template: `
        
我是NavBar
`
, methods: { handleClick() { console.log('nav nav') }, }, components: { child: { template: ``, } } }) let vm = new Vue({ el: '#app', data: {} })
script> html>

二 组件通信

2.1 父子通信之子传父

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>

head>
<body>
<div id="app">
    <h1>自定义事件实现父子通信之子传父h1>
    父组件中的name值为:{{name}}
    <hr>
    <init @myevnet="handleEvent">init>
    <hr>

div>
body>
<script>


    var init = {
        template: `
          

我是init组件

---》{{ name }}
`
, data() { return { name: '' } }, methods: { handleSend() { // alert('我被点了') // 在这里,触发自定义事件的执行 this.$emit('myevnet', this.name) } } } var vm = new Vue({ el: '#app', data: { name: '刘亦菲' }, methods: { handleEvent(name) { this.name = name } }, components: { init } })
script> html>

2.2 父子通信之父传子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">
    
    
    
    <navbar :myname="name" :isshow="true">navbar>
div>
body>
<script>
    //没有代码提示,语法检查,目前这么用
    //后面会使用webpack打包,直接定义成 xx.vue文件,通过webpack打包
    Vue.component('navbar', {
        template: `
            
父组件传递的内容是:{{myname}} 传入的布尔是{{isshow}}
`
, // props:['myname'], props:{ myname:String, isshow:Boolean, }, }) var vm = new Vue({ el: '#app', data: { name:'jasper' }, })
script> html>

2.3 ref属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="app">

    <input type="text" ref="mytext">
    <button @click="handleClick">点我button>
    <child ref="mychild">child>
div>
body>
<script>
    Vue.component('child',{
        template:`
child
`
, data(){ return { text:'子组件数据' } }, methods:{ add(){ console.log('子组件的add方法') } } }) var vm = new Vue({ el: '#app', data: { }, methods: { handleClick() { console.log(this) //this.$refs.mytext 获取到input控件,取出value值 console.log(this.$refs.mytext.value) console.log(this.$refs.mychild.text) // this.$refs.mychild.add() this.$refs.mychild.add('传递参数') } } })
script> html>

三 动态组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
head>
<body>
<div id="box">
    <ul>
        <li><a @click="who='child1'">首页a>li>
        <li><a @click="who='child2'">商品a>li>
        <li><a @click="who='child3'">购物车a>li>
    ul>
    <keep-alive>
         <component :is="who">component>
    keep-alive>

div>
body>
<script>
    Vue.component('child1', {
        template: `
首页
`
, }) Vue.component('child2', { template: `
商品
`
, }) Vue.component('child3', { template: `
购物车
`
, }) var vm = new Vue({ el: '#box', data: { who:'child1' }, })
script> html>

你可能感兴趣的:(vue.js,javascript)