vue基础学习-组件

DOCTYPE html>
<html>

<head>
    <title>vuetitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
    <div id="example">
        <my-component>my-component>
        <br>
        <Child>Child>
    div>
    <br>
    <div id="example2">
        <my-component>my-component>
        <br>
        <Child>Child>
    div>
body>

<script>
    //全局组件
    Vue.component('my-component', {
        template: '111'
    })

    //局部注册 需要通过使用组件实例选项 components 注册
    var Child = {
        template: `
A custom component! --- {{count}}
`
, // 一个组件的 data 选项必须是一个函数 // 但是我们为每一个组件返回了同一个对象引用 // data: { // counter: 0 // } data: function() { return { count: '11' } } } new Vue({ el: '#example', components: { Child //'my-component2': Child } }) new Vue({ el: '#example2' })
script> html>
DOCTYPE html>
<html>

<head>
    <title>vuetitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
    <div id="example">
        <my-component>my-component>
    div>

body>

<script>
    //组件的嵌套。组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项

    //局部注册 需要通过使用组件实例选项 components 注册
    var Child = {
        template: `
A custom component! --- {{count}}
`
, data: function () { return { count: '11' } } } //全局组件 组件的嵌套 Vue.component('my-component', { template: `
111
`
, components: { 'my-component2': Child } }) new Vue({ el: '#example' })
script> html>
DOCTYPE html>
<html>

<head>
    <title>vuetitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
    <div id="example-2">
        <child message="hello">child> <br />
        <child message="world">child> <br />
        <child2 initial-counter="6">child2> <br />
        
        <child2 v-bind:initial-counter="count">child2><br />
        
        <child2 v-for="item in posts" v-bind:initial-counter="item.title">child2>
body>

<script>
    Vue.component('child', {
        // 声明 props
        //props: ['message'],
        props: {
            message: {
                type: String,
                default: "default message"
            }
        },
        // 就像 data 一样,prop 可以用在模板内
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '{{ message }} 
'
}) Vue.component('child2', { // 声明 props props: ['initialCounter'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: ' {{ count }}
'
, data: function () { return { count: this.initialCounter } } }) new Vue({ el: '#example-2', data: { count: 10, posts: [ { id: 1, title: 'One' }, { id: 2, title: 'Two' }, { id: 3, title: 'Thre' } ] } })
script> html>
DOCTYPE html>
<html>

<head>
    <title>vuetitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
    <div id="example-2">
        <child @fun="mainFun">child>
        <input type="text" v-model="context">
    div>
body>

<script>
    Vue.component('child', {
        template: `
{{context}}
`
, methods: { funHandle() { //内建的 $emit 方法并传入事件名称来触发一个事件 this.$emit('fun', '返回父组件内容') } }, data: function () { return { context: '1111' } } }) new Vue({ el: '#example-2', methods: { mainFun(num) { console.log('子组件返回内容:' + num ) } }, data: { context: '111' } })
script> html>
DOCTYPE html>
<html>

<head>
    <title>vuetitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
    <div id="example-2">
        <h2>总人数:{{totalPerson}}h2>
        <child title="五年级一班" @fun="mainFun" v-model="totalPerson">child>
    div>
body>

<script>
    Vue.component('child', {
        template: `
`
, props: ['title', 'totalPerson'], methods: { funHandle() { this.count++; alert(totalPerson); //内建的 $emit 方法并传入事件名称来触发一个事件 this.$emit('fun', this.count) } }, data: function () { return { count: 0 } } }) new Vue({ el: '#example-2', methods: { mainFun(num) { console.log('子组件返回内容:' + num ); this.totalPerson += num; } }, data: { totalPerson: 0 } })
script> html>

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