vue组件定义方式,vue父子组件间的传值

vue组件定义方式,vue父子组件间的传值

DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8">
    head>

    <body>
        <div id="app">
            <my-nav>my-nav>
            <hr>
            <my-nav2>my-nav2>
            <hr>
            <my-demo>my-demo>
            <hr>
            <script-nav>script-nav>
            <hr>
            <my-tmp>my-tmp>
            <hr>
            <button @click="show = !show">切换动态组件button>
            <component :is="show ?'my-nav':'my-nav2'">component>
            <hr>
            <parent>parent>
        div>
        <hr>
        <div id="myNav">div>
        <script type="nav-template" id="my-nav">
            <h2>我是script中的模板</h2>
        script>
        <template id="my-tmp">
            <h2 bgcolor="pink">我是template中的模板h2>
        template>
        <script src="vue.js">script>
        <script>
        //组件: 一个大对象
        // 注册组件  (两种编写方式)
        // 注册组件,传入一个扩展过的构造器
        // Vue.component('my-component', Vue.extend({ /* ... */ }))
        // 注册组件,传入一个选项对象 (自动调用 Vue.extend)
        // Vue.component('my-component', { /* ... */ })

        //1.全局组件 (注册组件的位置在全局环境)
        //方式一:
        //1.1定义组件
        var myNav = Vue.extend({
            template: '

我是my-nav组件->{{msg}}

', data() { return { msg: '我是组件中的数据' } } }) //挂载到Vue的构造函数上,所有的Vue实例(vm)都共享这个组件, //所以就成了全局组件 Vue.component('my-nav', myNav); //全局组件也可以实例化后直接绑定到具体的元素上 //原理:因为myNav继承自Vue,所以也可以作为构造函数 //同样具有Vue的实例方法.$mount() new myNav().$mount('#myNav'); //方式二: 第二个参数是一个对象 Vue.component('my-nav2', { template: '

我是my-nav2222222222222组件->22222222

', }); //2.局部组件 (注册组件的位置在Vue的选项中) // 局部组件可以在Vue 的选项(配置项)中定义(my-demo),也可以使用全局已定义好的组件(my-nav) var vm = new Vue({ data: { msg: 13, show: true }, components: { 'my-demo': { template: '

我是一个纯内部组件

' }, 'my-nav': myNav, //我是一个使用了全局定义的内部组件 'script-nav': { template: '#my-nav' }, 'my-tmp': { template: '#my-tmp' }, 'parent': { template: '

我是父组件->{{msgC}}

', data() { return { msgP: '我是父组件中的数据', msgC:'', } }, methods:{ childMsg(msg){ this.msgC = msg } }, components: { 'child': { template: '

我是子组件->这是我拿到的父组件的数据->{{msgP}}

', // props:['msgP'], //方式一['',''] props:{ msgP:String }, data() { return { msgC: '我是子组件中的数据' } }, methods:{ send(){ //vm.$emit('事件名称',数据) this.$emit('childMsg',this.msgC); vm.$emit('test', 'hi') } } }, } } } }).$mount('#app'); vm.$on('test', function (msg) { console.log(msg) setTimeout(function(){ vm.$off() },5000) }) //组件模板 //1. template: '

我是my-nav组件

',
//组件的模板:在实际项目开发中,模板的标签一般很多,直接写到js中不是很方便 //2.可以将模板单独放在某个地方 //2.1

你可能感兴趣的:(vue组件定义方式,vue父子组件间的传值)